feat: initial commit - Band Management application

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.dockerignore

@@ -0,0 +1,8 @@
+# directories
+**/bin/
+**/obj/
+**/out/
+
+# files
+Dockerfile*
+**/*.md

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.gitattributes

@@ -0,0 +1,209 @@
+* text eol=lf
+
+## GITATTRIBUTES FOR WEB PROJECTS
+#
+# These settings are for any web project.
+#
+# Details per file setting:
+#   text    These files should be normalized (i.e. convert CRLF to LF).
+#   binary  These files are binary and should be left untouched.
+#
+# Note that binary is a macro for -text -diff.
+######################################################################
+
+# Auto detect
+##   Handle line endings automatically for files detected as
+##   text and leave all files detected as binary untouched.
+##   This will handle all files NOT defined below.
+*                 text=auto
+
+# Source code
+*.bash            text eol=lf
+*.bat             text eol=crlf
+*.cmd             text eol=crlf
+*.coffee          text
+*.css             text diff=css
+*.htm             text diff=html
+*.html            text diff=html
+*.inc             text
+*.ini             text
+*.js              text
+*.json            text
+*.jsx             text
+*.less            text
+*.ls              text
+*.map             text -diff
+*.od              text
+*.onlydata        text
+*.php             text diff=php
+*.pl              text
+*.ps1             text eol=crlf
+*.py              text diff=python
+*.rb              text diff=ruby
+*.sass            text
+*.scm             text
+*.scss            text diff=css
+*.sh              text eol=lf
+.husky/*          text eol=lf
+*.sql             text
+*.styl            text
+*.tag             text
+*.ts              text
+*.tsx             text
+*.xml             text
+*.xhtml           text diff=html
+
+# Docker
+Dockerfile        text
+
+# Documentation
+*.ipynb           text eol=lf
+*.markdown        text diff=markdown
+*.md              text diff=markdown
+*.mdwn            text diff=markdown
+*.mdown           text diff=markdown
+*.mkd             text diff=markdown
+*.mkdn            text diff=markdown
+*.mdtxt           text
+*.mdtext          text
+*.txt             text
+AUTHORS           text
+CHANGELOG         text
+CHANGES           text
+CONTRIBUTING      text
+COPYING           text
+copyright         text
+*COPYRIGHT*       text
+INSTALL           text
+license           text
+LICENSE           text
+NEWS              text
+readme            text
+*README*          text
+TODO              text
+
+# Templates
+*.dot             text
+*.ejs             text
+*.erb             text
+*.haml            text
+*.handlebars      text
+*.hbs             text
+*.hbt             text
+*.jade            text
+*.latte           text
+*.mustache        text
+*.njk             text
+*.phtml           text
+*.svelte          text
+*.tmpl            text
+*.tpl             text
+*.twig            text
+*.vue             text
+
+# Configs
+*.cnf             text
+*.conf            text
+*.config          text
+.editorconfig     text
+.env              text
+.gitattributes    text
+.gitconfig        text
+.htaccess         text
+*.lock            text -diff
+package.json      text eol=lf
+package-lock.json text eol=lf -diff
+pnpm-lock.yaml    text eol=lf -diff
+.prettierrc       text
+yarn.lock         text -diff
+*.toml            text
+*.yaml            text
+*.yml             text
+browserslist      text
+Makefile          text
+makefile          text
+
+# Heroku
+Procfile          text
+
+# Graphics
+*.ai              binary
+*.bmp             binary
+*.eps             binary
+*.gif             binary
+*.gifv            binary
+*.ico             binary
+*.jng             binary
+*.jp2             binary
+*.jpg             binary
+*.jpeg            binary
+*.jpx             binary
+*.jxr             binary
+*.pdf             binary
+*.png             binary
+*.psb             binary
+*.psd             binary
+# SVG treated as an asset (binary) by default.
+# *.svg             text
+# If you want to treat it as binary,
+# use the following line instead.
+*.svg             binary
+*.svgz            binary
+*.tif             binary
+*.tiff            binary
+*.wbmp            binary
+*.webp            binary
+
+# Audio
+*.kar             binary
+*.m4a             binary
+*.mid             binary
+*.midi            binary
+*.mp3             binary
+*.ogg             binary
+*.ra              binary
+
+# Video
+*.3gpp            binary
+*.3gp             binary
+*.as              binary
+*.asf             binary
+*.asx             binary
+*.avi             binary
+*.fla             binary
+*.flv             binary
+*.m4v             binary
+*.mng             binary
+*.mov             binary
+*.mp4             binary
+*.mpeg            binary
+*.mpg             binary
+*.ogv             binary
+*.swc             binary
+*.swf             binary
+*.webm            binary
+
+# Archives
+*.7z              binary
+*.gz              binary
+*.jar             binary
+*.rar             binary
+*.tar             binary
+*.zip             binary
+
+# Fonts
+*.ttf             binary
+*.eot             binary
+*.otf             binary
+*.woff            binary
+*.woff2           binary
+
+# Executables
+*.exe             binary
+*.pyc             binary
+
+# RC files (like .babelrc or .eslintrc)
+*.*rc             text
+
+# Ignore files (like .npmignore or .gitignore)
+*.*ignore         text

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.gitignore

@@ -0,0 +1,418 @@
+# globs
+Makefile.in
+*.userprefs
+*.usertasks
+config.make
+config.status
+aclocal.m4
+install-sh
+autom4te.cache/
+*.tar.gz
+tarballs/
+test-results/
+
+# Mac bundle stuff
+*.dmg
+*.app
+
+# content below from: https://github.com/github/gitignore/blob/main/Global/macOS.gitignore
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# content below from: https://github.com/github/gitignore/blob/main/Global/Windows.gitignore
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# content below from: https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+
+# Ignoring following files/folder only for master
+
+wwwroot/vendor/**/*.css
+wwwroot/vendor/fonts/*.css
+wwwroot/vendor/fonts/**/*
+wwwroot/vendor/**/*.js
+wwwroot/vendor/css
+
+src/fonts/iconify-icons.css
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# JetBrains Rider
+.idea/
+*.sln.iml
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# wal and shm files - SQLite
+*-wal
+*-shm

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+assets/vendor

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.prettierrc.json

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto"
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-dotnettools.csharp",
+    "jorgeserrano.vscode-csharp-snippets",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig"
+  ]
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/.vscode/settings.json

@@ -0,0 +1,44 @@
+{
+  "editor.wordWrap": "off",
+  "editor.formatOnSave": true,
+  "files.trimFinalNewlines": true,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "cSpell.language": "en",
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/_temp": true,
+    "**/bower_components": true,
+    "*.min.js": true,
+    "*.min.css": true
+  },
+  // JS
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  // JSON
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  // Extension: Prettier
+  "prettier.requireConfig": true,
+  "prettier.configPath": ".prettierrc.json",
+  "prettier.ignorePath": ".prettierignore",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // Extension: Git
+  "git.rebaseWhenSync": true,
+  "git.enableSmartCommit": true,
+  // Extension: npm
+  "npm.packageManager": "yarn",
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/AspnetCoreMvcFull.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.0">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SQLite" Version="9.0.0" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.0">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="9.0.0" />
+    <PackageReference Include="Microsoft.Data.Sqlite" Version="9.0.0" />
+    <None Update="AspnetCoreMvcFullContext.db">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+</Project>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/AspnetCoreMvcFull.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34322.80
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AspnetCoreMvcFull", "AspnetCoreMvcFull.csproj", "{966FFB55-6B04-4EE9-B2E4-E02CD1E69237}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{966FFB55-6B04-4EE9-B2E4-E02CD1E69237}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{966FFB55-6B04-4EE9-B2E4-E02CD1E69237}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{966FFB55-6B04-4EE9-B2E4-E02CD1E69237}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{966FFB55-6B04-4EE9-B2E4-E02CD1E69237}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {0F815C44-85F4-4EC5-AB9B-C8829174F88F}
+	EndGlobalSection
+EndGlobal

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/AcademyController.cs

@@ -0,0 +1,12 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class AcademyController : Controller
+{
+  public IActionResult Dashboard() => View();
+  public IActionResult MyCourse() => View();
+  public IActionResult CourseDetails() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/AccessController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class AccessController : Controller
+{
+public IActionResult Permission() => View();
+public IActionResult Roles() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/AppsController.cs

@@ -0,0 +1,13 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class AppsController : Controller
+{
+  public IActionResult Calendar() => View();
+  public IActionResult Chat() => View();
+  public IActionResult Kanban() => View();
+  public IActionResult Email() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/AuthController.cs

@@ -0,0 +1,22 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class AuthController : Controller
+{
+  public IActionResult ForgotPasswordBasic() => View();
+  public IActionResult ForgotPasswordCover() => View();
+  public IActionResult LoginBasic() => View();
+  public IActionResult LoginCover() => View();
+  public IActionResult RegisterBasic() => View();
+  public IActionResult RegisterCover() => View();
+  public IActionResult RegisterMultiSteps() => View();
+  public IActionResult ResetPasswordBasic() => View();
+  public IActionResult ResetPasswordCover() => View();
+  public IActionResult TwoStepsBasic() => View();
+  public IActionResult TwoStepsCover() => View();
+  public IActionResult VerifyEmailBasic() => View();
+  public IActionResult VerifyEmailCover() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/CardsController.cs

@@ -0,0 +1,15 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class CardsController : Controller
+{
+  public IActionResult Basic() => View();
+  public IActionResult Advance() => View();
+  public IActionResult Statistics() => View();
+  public IActionResult Analytics() => View();
+  public IActionResult Actions() => View();
+  public IActionResult Gamifications() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/ChartsController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class ChartsController : Controller
+{
+  public IActionResult Apex() => View();
+  public IActionResult Chartjs() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/DashboardsController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class DashboardsController : Controller
+{
+  public IActionResult Index() => View();
+  public IActionResult CRM() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/EcommerceController.cs

@@ -0,0 +1,28 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class EcommerceController : Controller
+{
+  public IActionResult Dashboard() => View();
+  public IActionResult CustomerAll() => View();
+  public IActionResult CustomerDetailsBilling() => View();
+  public IActionResult CustomerDetailsNotifications() => View();
+  public IActionResult CustomerDetailsOverview() => View();
+  public IActionResult CustomerDetailsSecurity() => View();
+  public IActionResult ProductAdd() => View();
+  public IActionResult ProductCategoryList() => View();
+  public IActionResult ProductList() => View();
+  public IActionResult OrderList() => View();
+  public IActionResult OrderDetails() => View();
+  public IActionResult SettingsCheckout() => View();
+  public IActionResult SettingsLocations() => View();
+  public IActionResult SettingsShipping() => View();
+  public IActionResult SettingsPayments() => View();
+  public IActionResult SettingsNotifications() => View();
+  public IActionResult SettingsStoreDetails() => View();
+  public IActionResult Referrals() => View();
+  public IActionResult Reviews() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/ExtendedUiController.cs

@@ -0,0 +1,22 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class ExtendedUiController : Controller
+{
+  public IActionResult Avatar() => View();
+  public IActionResult BlockUi() => View();
+  public IActionResult DragDrop() => View();
+  public IActionResult MediaPlayer() => View();
+  public IActionResult Misc() => View();
+  public IActionResult PerfectScrollbar() => View();
+  public IActionResult StarRatings() => View();
+  public IActionResult SweetAlert2() => View();
+  public IActionResult TextDivider() => View();
+  public IActionResult TimelineBasic() => View();
+  public IActionResult TimelineFullScreen() => View();
+  public IActionResult Tour() => View();
+  public IActionResult Treeview() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/FormLayoutsController.cs

@@ -0,0 +1,12 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class FormLayoutsController : Controller
+{
+public IActionResult Horizontal() => View();
+public IActionResult Vertical() => View();
+public IActionResult Sticky() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/FormValidationController.cs

@@ -0,0 +1,10 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class FormValidationController : Controller
+{
+public IActionResult Validation() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/FormWizardController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class FormWizardController : Controller
+{
+public IActionResult Icons() => View();
+public IActionResult Numbered() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/FormsController.cs

@@ -0,0 +1,19 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class FormsController : Controller
+{
+  public IActionResult BasicInputs() => View();
+  public IActionResult CustomOptions() => View();
+  public IActionResult Editors() => View();
+  public IActionResult Extras() => View();
+  public IActionResult FileUpload() => View();
+  public IActionResult InputGroups() => View();
+  public IActionResult Pickers() => View();
+  public IActionResult Selects() => View();
+  public IActionResult Sliders() => View();
+  public IActionResult Switches() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/FrontPagesController.cs

@@ -0,0 +1,15 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class FrontPagesController : Controller
+{
+  public IActionResult LandingPage() => View();
+  public IActionResult PaymentPage() => View();
+  public IActionResult PricingPage() => View();
+  public IActionResult CheckoutPage() => View();
+  public IActionResult HelpCenterLanding() => View();
+  public IActionResult HelpCenterArticle() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/HomeController.cs

@@ -0,0 +1,31 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class HomeController : Controller
+{
+    private readonly ILogger<HomeController> _logger;
+
+    public HomeController(ILogger<HomeController> logger)
+    {
+        _logger = logger;
+    }
+
+    public IActionResult Index()
+    {
+        return View();
+    }
+
+    public IActionResult Privacy()
+    {
+        return View();
+    }
+
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    public IActionResult Error()
+    {
+        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/IconsController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class IconsController : Controller
+{
+  public IActionResult Tabler() => View();
+  public IActionResult FontAwesome() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/InvoiceController.cs

@@ -0,0 +1,14 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class InvoiceController : Controller
+{
+  public IActionResult Add() => View();
+  public IActionResult List() => View();
+  public IActionResult Edit() => View();
+  public IActionResult Preview() => View();
+  public IActionResult Print() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/LayoutExamplesController.cs

@@ -0,0 +1,21 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class LayoutExamplesController : Controller
+{
+  public IActionResult Blank() => View();
+  public IActionResult CollapsedMenu() => View();
+  public IActionResult Container() => View();
+  public IActionResult ContentNavbar() => View();
+  public IActionResult ContentNavbarWithSidebar() => View();
+  public IActionResult Fluid() => View();
+  public IActionResult HorizontalMenu() => View();
+  public IActionResult VerticalMenu() => View();
+  public IActionResult NavbarFull() => View();
+  public IActionResult NavbarFullWithSidebar() => View();
+  public IActionResult WithoutMenu() => View();
+  public IActionResult WithoutNavbar() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/LogisticsController.cs

@@ -0,0 +1,11 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class LogisticsController : Controller
+{
+  public IActionResult Dashboard() => View();
+  public IActionResult Fleet() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/MapsController.cs

@@ -0,0 +1,10 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class MapsController : Controller
+{
+  public IActionResult Leaflet() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/ModalsController.cs

@@ -0,0 +1,10 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class ModalsController : Controller
+{
+  public IActionResult Examples() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/PagesController.cs

@@ -0,0 +1,24 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class PagesController : Controller
+{
+  public IActionResult AccountSettings() => View();
+  public IActionResult AccountSettingsBilling() => View();
+  public IActionResult AccountSettingsConnections() => View();
+  public IActionResult AccountSettingsNotifications() => View();
+  public IActionResult AccountSettingsSecurity() => View();
+  public IActionResult FAQ() => View();
+  public IActionResult MiscComingSoon() => View();
+  public IActionResult MiscError() => View();
+  public IActionResult MiscNotAuthorized() => View();
+  public IActionResult MiscUnderMaintenance() => View();
+  public IActionResult Pricing() => View();
+  public IActionResult ProfileConnections() => View();
+  public IActionResult ProfileUser() => View();
+  public IActionResult ProfileTeams() => View();
+  public IActionResult ProfileProjects() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/TablesController.cs

@@ -0,0 +1,13 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class TablesController : Controller
+{
+  public IActionResult Basic() => View();
+  public IActionResult DatatablesAdvanced() => View();
+  public IActionResult DatatablesBasic() => View();
+  public IActionResult DatatablesExtensions() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/TransactionsController.cs

@@ -0,0 +1,216 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Microsoft.EntityFrameworkCore;
+using AspnetCoreMvcFull.Models;
+using AspnetCoreMvcFull.Data;
+using Newtonsoft.Json;
+
+namespace AspnetCoreMvcFull.Controllers
+{
+    public class TransactionsController : Controller
+    {
+        private readonly AspnetCoreMvcFullContext _context;
+
+        public TransactionsController(AspnetCoreMvcFullContext context)
+        {
+            _context = context;
+        }
+
+        // Replace default error messages with custom messages
+        private void ReplaceErrorMessage(string propertyName, string customErrorMessage)
+        {
+            if (ModelState.TryGetValue(propertyName, out var entry))
+            {
+                if (entry.Errors.Any(e => e.ErrorMessage == "The value '' is invalid."))
+                {
+                    entry.Errors.Clear();
+                    entry.Errors.Add(customErrorMessage);
+                }
+            }
+        }
+
+        // Set success toast message
+        private void SetSuccessToast(string message, string cssClass)
+        {
+            // Add success toast message for the current operation
+            TempData["TransactionsToast"] = JsonConvert.SerializeObject(new List<TransactionsToast>
+            {
+                new TransactionsToast
+                {
+                    Message = message,
+                    CssClass = cssClass
+                }
+            });
+        }
+
+        // GET: Transactions
+        public async Task<IActionResult> Index()
+        {
+          // Calculate total transactions
+          int totalTransactions = await _context.Transactions.CountAsync();
+          var transactions = await _context.Transactions.ToListAsync();
+          var totalPaidTransactions = transactions
+            .Where(t => t.Status?.ToLower() == "paid")
+            .Sum(t => t.Total);
+
+          var totalDueTransactions = transactions
+            .Where(t => t.Status?.ToLower() == "due")
+            .Sum(t => t.Total);
+
+          var totalCanceledTransactions = transactions
+            .Where(t => t.Status?.ToLower() == "canceled")
+            .Sum(t => t.Total);
+
+          // Pass these counts to the view or perform further operations
+          ViewData["TotalTransactions"] = totalTransactions;
+          ViewData["TotalPaidTransactions"] = totalPaidTransactions;
+          ViewData["TotalDueTransactions"] = totalDueTransactions;
+          ViewData["TotalCanceledTransactions"] = totalCanceledTransactions;
+
+          return View(await _context.Transactions.ToListAsync());
+        }
+
+        // GET: Transactions/Add
+        public IActionResult Add()
+        {
+            return View();
+        }
+
+        // POST: Transactions/Add
+        // To protect from overposting attacks, enable the specific properties you want to bind to.
+        // For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public async Task<IActionResult> Add([Bind("Id,Customer,TransactionDate,DueDate,Total,Status")] Transactions transactions)
+        {
+          if (ModelState.IsValid)
+          {
+              _context.Add(transactions);
+              await _context.SaveChangesAsync();
+              // Add success toast message for adding
+              SetSuccessToast("Added successfully", "bg-success");
+              TempData["DisplayToast"] = true;
+              return RedirectToAction(nameof(Index));
+          }
+          // Replace default error messages
+          ReplaceErrorMessage("TransactionDate", "Enter a valid Transaction Date");
+          ReplaceErrorMessage("DueDate", "Enter a valid Due Date");
+          ReplaceErrorMessage("Total", "Enter Total as a currency value");
+          return View(transactions);
+        }
+
+        // GET: Transactions/Update/5
+        public async Task<IActionResult> Update(int? id)
+        {
+            if (id == null)
+            {
+                return NotFound();
+            }
+
+            var transactions = await _context.Transactions.FindAsync(id);
+            if (transactions == null)
+            {
+                return NotFound();
+            }
+            return View(transactions);
+        }
+
+        // POST: Transactions/Update/5
+        // To protect from overposting attacks, enable the specific properties you want to bind to.
+        // For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public async Task<IActionResult> Update(int id, [Bind("Id,Customer,TransactionDate,DueDate,Total,Status")] Transactions transactions)
+        {
+          if (id != transactions.Id)
+          {
+            return NotFound();
+          }
+          // Set default dates to Today
+          if (transactions.TransactionDate == DateTime.MinValue)
+          {
+            transactions.TransactionDate = DateTime.Today;
+            ModelState.Remove("TransactionDate"); // Clear existing errors
+          }
+
+          // Set default dates to Tomorrow
+          if (transactions.DueDate == DateTime.MinValue)
+          {
+            transactions.DueDate = DateTime.Today.AddDays(1);
+            ModelState.Remove("DueDate"); // Clear existing errors
+          }
+
+          // Revalidate dates
+          if (transactions.DueDate <= transactions.TransactionDate)
+          {
+            ModelState.AddModelError("DueDate", "Due Date must be later than Transaction Date.");
+          }
+
+            if (ModelState.IsValid)
+            {
+                try
+                {
+                    _context.Update(transactions);
+                    await _context.SaveChangesAsync();
+
+                    // Add success toast message for updating
+                    SetSuccessToast("Updated successfully", "bg-info");
+                    TempData["DisplayToast"] = true;
+                }
+                catch (DbUpdateConcurrencyException)
+                {
+                    if (!TransactionsExists(transactions.Id))
+                    {
+                        return NotFound();
+                    }
+                    else
+                    {
+                        throw;
+                    }
+                }
+                return RedirectToAction(nameof(Index));
+            }
+            // Replace default error messages
+            ReplaceErrorMessage("TransactionDate", "Enter a valid Transaction Date");
+            ReplaceErrorMessage("DueDate", "Enter a valid Due Date");
+            ReplaceErrorMessage("Total", "Enter Total as a currency value");
+            return View(transactions);
+        }
+
+        // GET: Transactions/Delete/5
+        public async Task<IActionResult> Delete(int? id)
+        {
+            if (id == null)
+            {
+                return NotFound();
+            }
+
+            var transactions = await _context.Transactions
+                .FirstOrDefaultAsync(m => m.Id == id);
+            if (transactions == null)
+            {
+                return NotFound();
+            }
+            else
+            {
+               _context.Transactions.Remove(transactions);
+                await _context.SaveChangesAsync();
+
+                // Add success toast message for deleting
+                SetSuccessToast("Deleted successfully", "bg-danger");
+                TempData["DisplayToast"] = true;
+            }
+            await _context.SaveChangesAsync();
+            return RedirectToAction(nameof(Index));
+        }
+
+        private bool TransactionsExists(int id)
+        {
+            return _context.Transactions.Any(e => e.Id == id);
+        }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/UiController.cs

@@ -0,0 +1,28 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class UiController : Controller
+{
+  public IActionResult Accordion() => View();
+  public IActionResult Alerts() => View();
+  public IActionResult Badges() => View();
+  public IActionResult Buttons() => View();
+  public IActionResult Carousel() => View();
+  public IActionResult Collapse() => View();
+  public IActionResult Dropdowns() => View();
+  public IActionResult Footer() => View();
+  public IActionResult ListGroups() => View();
+  public IActionResult Modals() => View();
+  public IActionResult Navbar() => View();
+  public IActionResult Offcanvas() => View();
+  public IActionResult PaginationBreadcrumbs() => View();
+  public IActionResult Progress() => View();
+  public IActionResult Spinners() => View();
+  public IActionResult TabsPills() => View();
+  public IActionResult Toasts() => View();
+  public IActionResult TooltipsPopovers() => View();
+  public IActionResult Typography() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/UsersController.cs

@@ -0,0 +1,15 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class UsersController : Controller
+{
+  public IActionResult List() => View();
+  public IActionResult ViewAccount() => View();
+  public IActionResult ViewBilling() => View();
+  public IActionResult ViewConnections() => View();
+  public IActionResult ViewNotifications() => View();
+  public IActionResult ViewSecurity() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Controllers/WizardsController.cs

@@ -0,0 +1,12 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Controllers;
+
+public class WizardsController : Controller
+{
+  public IActionResult Checkout() => View();
+  public IActionResult CreateDeal() => View();
+  public IActionResult PropertyListing() => View();
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Data/AspnetCoreMvcFullContext.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.EntityFrameworkCore;
+using AspnetCoreMvcFull.Models;
+
+namespace AspnetCoreMvcFull.Data
+{
+    public class AspnetCoreMvcFullContext : DbContext
+    {
+        public AspnetCoreMvcFullContext (DbContextOptions<AspnetCoreMvcFullContext> options)
+            : base(options)
+        {
+        }
+        public DbSet<AspnetCoreMvcFull.Models.Transactions> Transactions { get; set; } = default!;
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Dockerfile

@@ -0,0 +1,27 @@
+# Use the .NET 9 SDK image for building the application
+FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build-env
+WORKDIR /AspnetCoreMvcFull
+
+# Copy everything
+COPY . ./
+# Restore as distinct layers
+RUN dotnet restore
+
+# Copy the entire project and build
+RUN dotnet publish -c Release -o out
+
+# Build runtime image
+FROM mcr.microsoft.com/dotnet/aspnet:9.0
+WORKDIR /AspnetCoreMvcFull
+COPY --from=build-env /AspnetCoreMvcFull/out ./
+
+# Expose port 5050 for the application
+EXPOSE 80
+
+# Set the entry point for the container
+ENTRYPOINT ["dotnet", "AspnetCoreMvcFull.dll"]
+
+# Display a message in the terminal during build
+RUN echo  -----------------------------------------------
+RUN echo  Application is running at http://localhost:5050
+RUN echo  -----------------------------------------------

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Gulpfile.js

@@ -0,0 +1,285 @@
+const path = require('path');
+const merge = require('merge-stream');
+
+// Config
+// -------------------------------------------------------------------------------
+
+const env = require('gulp-environment');
+process.env.NODE_ENV = env.current.name;
+
+const conf = (() => {
+  const _conf = require('./build-config');
+  return require('deepmerge').all([{}, _conf.base || {}, _conf[process.env.NODE_ENV] || {}]);
+})();
+
+conf.distPath = path.resolve(__dirname, conf.distPath).replace(/\\/g, '/');
+
+// Modules
+// -------------------------------------------------------------------------------
+
+const { src, dest, parallel, series, watch } = require('gulp');
+const webpack = require('webpack');
+const sass = require('gulp-dart-sass');
+const localSass = require('sass');
+const autoprefixer = require('gulp-autoprefixer');
+const exec = require('gulp-exec');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+const gulpIf = require('gulp-if');
+const sourcemaps = require('gulp-sourcemaps');
+const { deleteAsync } = require('del');
+const colors = require('ansi-colors');
+const log = require('fancy-log');
+const browserSync = require('browser-sync').create();
+colors.enabled = require('color-support').hasBasic;
+
+// Utilities
+// -------------------------------------------------------------------------------
+
+function normalize(p) {
+  return p.replace(/\\/g, '/');
+}
+
+function root(p) {
+  return p.startsWith('!')
+    ? normalize(`!${path.join(__dirname, 'src', p.slice(1))}`)
+    : normalize(path.join(__dirname, 'src', p));
+}
+
+function srcGlob(...src) {
+  return src.map(p => root(p)).concat(conf.exclude.map(d => `!${root(d)}/**/*`));
+}
+
+// Tasks
+// -------------------------------------------------------------------------------
+// Build CSS
+// -------------------------------------------------------------------------------
+const buildCssTask = function (cb) {
+  return src(srcGlob('**/*.scss', '!**/_*.scss'))
+    .pipe(gulpIf(conf.sourcemaps, sourcemaps.init()))
+    .pipe(
+      // If sass is installed on your local machine, it will use command line to compile sass else it will use dart sass npm which 3 time slower
+      gulpIf(
+        localSass,
+        exec(
+          // If conf.minify == true, generate compressed style without sourcemap
+          gulpIf(
+            conf.minify,
+            `sass --load-path=node_modules/ src/site.scss:${conf.distPath}/css/site.css src/scss:${conf.distPath}/vendor/css src/fonts:${conf.distPath}/vendor/fonts src/libs:${conf.distPath}/vendor/libs --style compressed --no-source-map`,
+            `sass --load-path=node_modules/ src/site.scss:${conf.distPath}/css/site.css src/scss:${conf.distPath}/vendor/css src/fonts:${conf.distPath}/vendor/fonts src/libs:${conf.distPath}/vendor/libs --no-source-map`
+          ),
+          function (err) {
+            cb(err);
+          }
+        ),
+        sass
+          .sync({
+            includePaths: ['node_modules'], // Add this line to include node_modules
+            outputStyle: conf.minify ? 'compressed' : 'expanded'
+          })
+          .on('error', sass.logError)
+      )
+    )
+    .pipe(gulpIf(conf.sourcemaps, sourcemaps.write()))
+    .pipe(autoprefixer())
+    .pipe(rename({ extname: '.css' }))
+    .pipe(
+      rename(function (path) {
+        path.dirname = path.dirname.replace('scss', 'css');
+      })
+    )
+    .pipe(dest(conf.distPath))
+    .pipe(browserSync.stream());
+};
+
+// Build JS
+// -------------------------------------------------------------------------------
+const webpackJsTask = function (cb) {
+  setTimeout(function () {
+    webpack(require('./webpack.config'), (err, stats) => {
+      if (err) {
+        log(colors.gray('Webpack error:'), colors.red(err.stack || err));
+        if (err.details) log(colors.gray('Webpack error details:'), err.details);
+        return cb();
+      }
+
+      const info = stats.toJson();
+
+      if (stats.hasErrors()) {
+        info.errors.forEach(e => log(colors.gray('Webpack compilation error:'), colors.red(e)));
+      }
+
+      if (stats.hasWarnings()) {
+        info.warnings.forEach(w => log(colors.gray('Webpack compilation warning:'), colors.yellow(w)));
+      }
+
+      // Print log
+      log(
+        stats.toString({
+          colors: colors.enabled,
+          hash: false,
+          timings: false,
+          chunks: false,
+          chunkModules: false,
+          modules: false,
+          children: true,
+          version: true,
+          cached: false,
+          cachedAssets: false,
+          reasons: false,
+          source: false,
+          errorDetails: false
+        })
+      );
+
+      cb();
+      browserSync.reload();
+    });
+  }, 1);
+};
+const pageJsTask = function () {
+  return src(conf.distPath + `/js/**/*.js`)
+    .pipe(gulpIf(conf.minify, uglify()))
+    .pipe(dest(conf.distPath + `/js`));
+};
+
+// Build fonts
+// -------------------------------------------------------------------------------
+
+const FONT_TASKS = [
+  {
+    name: 'fontawesome',
+    path: 'node_modules/@fortawesome/fontawesome-free/webfonts/*'
+  },
+  {
+    name: 'flags',
+    path: 'node_modules/flag-icons/flags/**/*'
+  },
+  {
+    name: 'tabler',
+    path: 'node_modules/@tabler/icons/iconfont/fonts/*'
+  }
+].reduce(function (tasks, font) {
+  const functionName = `buildFonts${font.name.replace(/^./, m => m.toUpperCase())}Task`;
+  const taskFunction = function () {
+    // return src(root(font.path))
+    return (
+      src(font.path)
+        // .pipe(dest(normalize(path.join(conf.distPath, 'fonts', font.name))))
+        .pipe(dest(path.join(conf.distPath + `/vendor/`, 'fonts', font.name)))
+    );
+  };
+
+  Object.defineProperty(taskFunction, 'name', {
+    value: functionName
+  });
+
+  return tasks.concat([taskFunction]);
+}, []);
+
+// Formula module requires KaTeX - Quill Editor
+const KATEX_FONT_TASK = [
+  {
+    name: 'katex',
+    path: 'node_modules/katex/dist/fonts/*'
+  }
+].reduce(function (tasks, font) {
+  const functionName = `buildFonts${font.name.replace(/^./, m => m.toUpperCase())}Task`;
+  const taskFunction = function () {
+    return src(font.path).pipe(dest(path.join(conf.distPath, 'vendor/libs/quill/fonts')));
+  };
+
+  Object.defineProperty(taskFunction, 'name', {
+    value: functionName
+  });
+
+  return tasks.concat([taskFunction]);
+}, []);
+
+const buildFontsTask = parallel(FONT_TASKS, KATEX_FONT_TASK);
+
+// Copy task for third party plugins until we use npm packages
+const buildPluginCopyTask = function () {
+  return merge(
+    src('src/libs/jstree/themes/**/*.*').pipe(dest(path.join(conf.distPath, 'vendor/libs/jstree/themes/'))),
+    src('src/libs/leaflet/images/**/*.*').pipe(dest(path.join(conf.distPath, 'vendor/libs/leaflet/images/'))),
+    src('src/fonts/tabler/**/*.*').pipe(dest(path.join(conf.distPath, 'vendor/fonts/tabler/')))
+  );
+};
+
+// Iconify task
+// -------------------------------------------------------------------------------
+const buildIconifyTask = function (cb) {
+  // Create required directories without copying files
+  const fs = require('fs');
+  const directories = ['./src/fonts/iconify', './src/fonts'];
+
+  directories.forEach(dir => {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  });
+
+  const iconify = require('child_process').spawn('node', ['./src/fonts/iconify/iconify.js'], {
+    cwd: __dirname
+  });
+
+  iconify.stdout.on('data', data => {
+    console.log(data.toString());
+  });
+
+  iconify.stderr.on('data', data => {
+    console.error(data.toString());
+  });
+
+  iconify.on('close', code => {
+    cb();
+  });
+};
+
+// Clean build directory
+// -------------------------------------------------------------------------------
+
+const cleanTask = function () {
+  return deleteAsync([`${conf.distPath}/vendor/**/*`], {
+    force: true
+  });
+};
+
+const cleanSourcemapsTask = function () {
+  return deleteAsync([`${conf.distPath}/**/*.map`], {
+    force: true
+  });
+};
+
+const cleanAllTask = parallel(cleanTask, cleanSourcemapsTask);
+
+// Watch
+// -------------------------------------------------------------------------------
+const watchTask = function () {
+  watch(srcGlob('**/*.scss'), buildCssTask);
+  watch(srcGlob('**/*.js', '!js/**/*.js'), webpackJsTask);
+  watch(srcGlob('/js/**/*.js'), pageJsTask);
+};
+
+// Build (Dev & Prod)
+// -------------------------------------------------------------------------------
+const buildJsTask = series(webpackJsTask, pageJsTask, buildPluginCopyTask);
+
+const buildTasks = [buildCssTask, buildJsTask, buildFontsTask, buildIconifyTask];
+const buildTask = conf.cleanDist
+  ? series(cleanAllTask, parallel(buildTasks))
+  : series(cleanAllTask, cleanSourcemapsTask, parallel(buildTasks));
+
+// Exports
+// -------------------------------------------------------------------------------
+module.exports = {
+  default: buildTask,
+  clean: cleanAllTask,
+  'build:js': buildJsTask,
+  'build:css': buildCssTask,
+  'build:fonts': buildFontsTask,
+  'build:iconify': buildIconifyTask,
+  build: buildTask,
+  watch: watchTask
+};

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Migrations/20231130123831_InitialCreate.Designer.cs

@@ -0,0 +1,54 @@
+// <auto-generated />
+using System;
+using AspnetCoreMvcFull.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace AspnetCoreMvcFull.Migrations
+{
+    [DbContext(typeof(AspnetCoreMvcFullContext))]
+    [Migration("20231130123831_InitialCreate")]
+    partial class InitialCreate
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.0");
+
+            modelBuilder.Entity("AspnetCoreMvcFull.Models.Transactions", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Customer")
+                        .IsRequired()
+                        .HasMaxLength(60)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("DueDate")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Status")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<decimal>("Total")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("TransactionDate")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Transactions");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Migrations/20231130123831_InitialCreate.cs

@@ -0,0 +1,39 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace AspnetCoreMvcFull.Migrations
+{
+    /// <inheritdoc />
+    public partial class InitialCreate : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "Transactions",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "INTEGER", nullable: false)
+                        .Annotation("Sqlite:Autoincrement", true),
+                    Customer = table.Column<string>(type: "TEXT", maxLength: 60, nullable: false),
+                    TransactionDate = table.Column<DateTime>(type: "TEXT", nullable: false),
+                    DueDate = table.Column<DateTime>(type: "TEXT", nullable: false),
+                    Total = table.Column<decimal>(type: "TEXT", nullable: false),
+                    Status = table.Column<string>(type: "TEXT", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_Transactions", x => x.Id);
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "Transactions");
+        }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Migrations/AspnetCoreMvcFullContextModelSnapshot.cs

@@ -0,0 +1,51 @@
+// <auto-generated />
+using System;
+using AspnetCoreMvcFull.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace AspnetCoreMvcFull.Migrations
+{
+    [DbContext(typeof(AspnetCoreMvcFullContext))]
+    partial class AspnetCoreMvcFullContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "8.0.0");
+
+            modelBuilder.Entity("AspnetCoreMvcFull.Models.Transactions", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Customer")
+                        .IsRequired()
+                        .HasMaxLength(60)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("DueDate")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Status")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<decimal>("Total")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("TransactionDate")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Transactions");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Models/ErrorViewModel.cs

@@ -0,0 +1,8 @@
+namespace AspnetCoreMvcFull.Models;
+
+public class ErrorViewModel
+{
+    public string? RequestId { get; set; }
+
+    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Models/SeedData.cs

@@ -0,0 +1,73 @@
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.DependencyInjection;
+using System;
+using System.Linq;
+using AspnetCoreMvcFull.Data;
+
+namespace AspnetCoreMvcFull.Models
+{
+    public static class SeedData
+    {
+        public static void Initialize(IServiceProvider serviceProvider)
+        {
+            using (var context = new AspnetCoreMvcFullContext(
+                serviceProvider.GetRequiredService<DbContextOptions<AspnetCoreMvcFullContext>>()))
+            {
+                if (context == null || context.Transactions == null)
+                {
+                    throw new ArgumentNullException("Null AspnetCoreMvcFullContext");
+                }
+
+                // Look for any transactions.
+                if (context.Transactions.Any())
+                {
+                    return;   // DB has been seeded
+                }
+
+                context.Transactions.AddRange(
+                    new Transactions
+                    {
+                        Customer = "John Doe",
+                        TransactionDate = DateTime.Parse("2023-01-01"),
+                        DueDate = DateTime.Parse("2023-01-10"),
+                        Total = 100.50m,
+                        Status = "paid"
+                    },
+                    new Transactions
+                    {
+                        Customer = "Jane Smith",
+                        TransactionDate = DateTime.Parse("2023-02-15"),
+                        DueDate = DateTime.Parse("2023-02-28"),
+                        Total = 75.20m,
+                        Status = "due"
+                    },
+                    new Transactions
+                    {
+                        Customer = "Bob Johnson",
+                        TransactionDate = DateTime.Parse("2023-03-10"),
+                        DueDate = DateTime.Parse("2023-03-15"),
+                        Total = 50.75m,
+                        Status = "canceled"
+                    },
+                    new Transactions
+                    {
+                        Customer = "Oliver Freeman",
+                        TransactionDate = DateTime.Parse("2023-03-11"),
+                        DueDate = DateTime.Parse("2023-03-25"),
+                        Total = 90.65m,
+                        Status = "due"
+                    },
+                    new Transactions
+                    {
+                        Customer = "George Washington",
+                        TransactionDate = DateTime.Parse("2023-05-10"),
+                        DueDate = DateTime.Parse("2023-07-15"),
+                        Total = 60.25m,
+                        Status = "paid"
+                    }
+                );
+                context.SaveChanges();
+            }
+        }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Models/Transactions.cs

@@ -0,0 +1,58 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+using System.Reflection;
+
+namespace AspnetCoreMvcFull.Models
+{
+  public class Transactions
+  {
+    public int Id { get; set; }
+    [StringLength(60, MinimumLength = 2, ErrorMessage = "Customer name must be between 2 and 60 characters")]
+    [Required(ErrorMessage = "Customer name is required")]
+    public string? Customer { get; set; }
+    [Display(Name = "Transaction Date")]
+    [DataType(DataType.Date)]
+    [Required(ErrorMessage = "Transaction Date is required")]
+    public DateTime TransactionDate { get; set; }
+    [Display(Name = "Due Date")]
+    [DateGreaterThan("TransactionDate", ErrorMessage = "Due Date must be later than Transaction Date")]
+    [DataType(DataType.Date)]
+    [Required(ErrorMessage = "Due Date is required")]
+    public DateTime DueDate { get; set; }
+    [DataType(DataType.Currency, ErrorMessage = "Total must be a currency value")]
+    [Required(ErrorMessage = "Total is required")]
+    public decimal? Total { get; set; }
+    [Required(ErrorMessage = "Status must be paid, due or canceled")]
+    public String? Status { get; set; }
+  }
+
+}
+
+// For validation of DueDate > TransactionDate
+public class DateGreaterThanAttribute : ValidationAttribute
+{
+    private readonly string _comparisonProperty;
+
+    public DateGreaterThanAttribute(string comparisonProperty)
+    {
+        _comparisonProperty = comparisonProperty;
+    }
+
+    protected override ValidationResult IsValid(object? value, ValidationContext validationContext)
+    {
+        ErrorMessage = ErrorMessageString;
+        var currentValue = (DateTime?)value;
+
+        var property = validationContext.ObjectType.GetProperty(_comparisonProperty);
+
+        if (property == null)
+            throw new ArgumentException("Property with this name not found");
+
+        var comparisonValue = (DateTime?)property.GetValue(validationContext.ObjectInstance);
+
+        if (currentValue <= comparisonValue)
+            return new ValidationResult(ErrorMessage);
+
+        return ValidationResult.Success!;
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Models/TransactionsToast.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AspnetCoreMvcFull.Models
+{
+    public class TransactionsToast
+    {
+    public string? Message { get; set; }
+    public string? CssClass { get; set; }
+    }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Program.cs

@@ -0,0 +1,46 @@
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.DependencyInjection;
+using AspnetCoreMvcFull.Data;
+using AspnetCoreMvcFull.Models;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Connect to the database
+builder.Services.AddDbContext<AspnetCoreMvcFullContext>(options =>
+    options.UseSqlite(builder.Configuration.GetConnectionString("AspnetCoreMvcFullContext") ?? throw new InvalidOperationException("Connection string 'AspnetCoreMvcFullContext' not found.")));
+
+builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
+
+// Add services to the container.
+builder.Services.AddControllersWithViews();
+
+var app = builder.Build();
+
+// Create a service scope to get an AspnetCoreMvcFullContext instance using DI and seed the database.
+using (var scope = app.Services.CreateScope())
+{
+    var services = scope.ServiceProvider;
+
+    SeedData.Initialize(services);
+}
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Home/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseStaticFiles();
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapControllerRoute(
+    name: "default",
+    pattern: "{controller=Dashboards}/{action=Index}/{id?}"); // <-- Update in AspnetCoreMvcStarter
+
+app.Run();

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Properties/launchSettings.json

@@ -0,0 +1,37 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:6445",
+      "sslPort": 44383
+    }
+  },
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5055",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7230;http://localhost:5055",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Academy/CourseDetails.cshtml

@@ -0,0 +1,270 @@
+@{
+  ViewData["Title"] = "Academy - My Courses - App";
+}
+
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/plyr/plyr.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/plyr/plyr.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-academy-details.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-academy-course-details.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <div class="col-lg-8">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+          <div class="me-1">
+            <h5 class="mb-0">UI/UX Basic Fundamentals</h5>
+            <p class="mb-0">Prof. <span class="fw-medium text-heading"> Devonne Wallbridge </span></p>
+          </div>
+          <div class="d-flex align-items-center">
+            <span class="badge bg-label-danger">UI/UX</span>
+            <i class="icon-base ti tabler-share icon-lg mx-4"></i>
+            <i class="icon-base ti tabler-bookmarks icon-lg"></i>
+          </div>
+        </div>
+        <div class="card academy-content shadow-none border">
+          <div class="p-2">
+            <div class="cursor-pointer">
+              <video class="w-100" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="plyr-video-player" playsinline controls>
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+              </video>
+            </div>
+          </div>
+          <div class="card-body pt-4">
+            <h5>About this course</h5>
+            <p class="mb-0">Learn web design in 1 hour with 25+ simple-to-use rules and guidelines — tons of amazing web design resources included!</p>
+            <hr class="my-6" />
+            <h5>By the numbers</h5>
+            <div class="d-flex flex-wrap row-gap-2">
+              <div class="me-12">
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-check me-2 align-bottom"></i>Skill level: All Levels</p>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-users me-2 align-top"></i>Students: 38,815</p>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-world me-2 align-bottom"></i>Languages: English</p>
+                <p class="text-nowrap mb-0"><i class="icon-base ti tabler-file me-2 align-bottom"></i>Captions: Yes</p>
+              </div>
+              <div>
+                <p class="text-nowrap mb-2"><i class="icon-base ti tabler-video me-2 align-top ms-50"></i>Lectures: 19</p>
+                <p class="text-nowrap mb-0"><i class="icon-base ti tabler-clock me-2 align-top"></i>Video: 1.5 total hours</p>
+              </div>
+            </div>
+            <hr class="my-6" />
+            <h5>Description</h5>
+            <p class="mb-6">The material of this course is also covered in my other course about web design and development with HTML5 & CSS3. Scroll to the bottom of this page to check out that course, too! If you're already taking my other course, you already have all it takes to start designing beautiful websites today!</p>
+            <p class="mb-6">"Best web design course: If you're interested in web design, but want more than just a "how to use WordPress" course,I highly recommend this one." — Florian Giusti</p>
+            <p>"Very helpful to us left-brained people: I am familiar with HTML, CSS, JQuery, and Twitter Bootstrap, but I needed instruction in web design. This course gave me practical, impactful techniques for making websites more beautiful and engaging." — Susan Darlene Cain</p>
+            <hr class="my-6" />
+            <h5>Instructor</h5>
+            <div class="d-flex justify-content-start align-items-center user-name">
+              <div class="avatar-wrapper">
+                <div class="avatar me-4"><img src="~/img/avatars/11.png" alt="Avatar" class="rounded-circle" /></div>
+              </div>
+              <div class="d-flex flex-column">
+                <h6 class="mb-1">Devonne Wallbridge</h6>
+                <small>Web Developer, Designer, and Teacher</small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4">
+    <div class="accordion stick-top accordion-custom-button" id="courseContent">
+      <div class="accordion-item active mb-0">
+        <div class="accordion-header" id="headingOne">
+          <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#chapterOne" aria-expanded="true" aria-controls="chapterOne">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Course Content</span>
+              <span class="text-body fw-normal">2 / 5 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterOne" class="accordion-collapse collapse show" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck1" checked="" />
+              <label for="defaultCheck1" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Welcome to this course</span>
+                <small class="text-body d-block">2.4 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck2" checked="" />
+              <label for="defaultCheck2" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Watch before you start</span>
+                <small class="text-body d-block">4.8 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck3" />
+              <label for="defaultCheck3" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Basic design theory</span>
+                <small class="text-body d-block">5.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck4" />
+              <label for="defaultCheck4" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Basic fundamentals</span>
+                <small class="text-body d-block">3.6 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3" type="checkbox" id="defaultCheck5" />
+              <label for="defaultCheck5" class="form-check-label ms-4">
+                <span class="mb-0 h6">5. What is ui/ux</span>
+                <small class="text-body d-block">10.6 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingTwo">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterTwo" aria-expanded="false" aria-controls="chapterTwo">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Web Design for Web Developers</span>
+              <span class="text-body fw-normal">1 / 4 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterTwo" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck1" checked="" />
+              <label for="defCheck1" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. How to use Pages in Figma</span>
+                <small class="text-body d-block">8:31 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck2" />
+              <label for="defCheck2" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. What is Lo Fi Wireframe</span>
+                <small class="text-body d-block">2 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck3" />
+              <label for="defCheck3" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. How to use color in Figma</span>
+                <small class="text-body d-block">5.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck4" />
+              <label for="defCheck4" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Frames vs Groups in Figma</span>
+                <small class="text-body d-block">3.6 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingThree">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterThree" aria-expanded="false" aria-controls="chapterThree">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Build Beautiful Websites!</span>
+              <span class="text-body fw-normal">0 / 6 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterThree" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-01" />
+              <label for="defCheck-01" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Section & Div Block</span>
+                <small class="text-body d-block">8:31 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-02" />
+              <label for="defCheck-02" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Read-Only Version of Chat App</span>
+                <small class="text-body d-block">8 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-03" />
+              <label for="defCheck-03" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Webflow Autosave</span>
+                <small class="text-body d-block">2.9 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-04" />
+              <label for="defCheck-04" class="form-check-label ms-4">
+                <span class="mb-0 h6">4. Canvas Settings</span>
+                <small class="text-body d-block">7.6 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-05" />
+              <label for="defCheck-05" class="form-check-label ms-4">
+                <span class="mb-0 h6">5. HTML Tags</span>
+                <small class="text-body d-block">10 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-06" />
+              <label for="defCheck-06" class="form-check-label ms-4">
+                <span class="mb-0 h6">6. Footer (Chat App)</span>
+                <small class="text-body d-block">9.10 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <div class="accordion-header" id="headingFour">
+          <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#chapterFour" aria-expanded="false" aria-controls="chapterFour">
+            <span class="d-flex flex-column">
+              <span class="h5 mb-0">Final Project</span>
+              <span class="text-body fw-normal">2 / 3 | 4.4 min</span>
+            </span>
+          </button>
+        </div>
+        <div id="chapterFour" class="accordion-collapse collapse" data-bs-parent="#courseContent">
+          <div class="accordion-body py-4">
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-101" checked="" />
+              <label for="defCheck-101" class="form-check-label ms-4">
+                <span class="mb-0 h6">1. Responsive Blog Site</span>
+                <small class="text-body d-block">10:0 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-4">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-102" checked="" />
+              <label for="defCheck-102" class="form-check-label ms-4">
+                <span class="mb-0 h6">2. Responsive Portfolio</span>
+                <small class="text-body d-block">13:00 min</small>
+              </label>
+            </div>
+            <div class="form-check mb-0">
+              <input class="form-check-input mt-3 mt-3" type="checkbox" id="defCheck-103" />
+              <label for="defCheck-103" class="form-check-label ms-4">
+                <span class="mb-0 h6">3. Responsive eCommerce Website</span>
+                <small class="text-body d-block">15 min</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Academy/Dashboard.cshtml

@@ -0,0 +1,530 @@
+
+@{
+  ViewData["Title"] = "Academy - Dashboard - App";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-academy-dashboard.js"></script>
+}
+
+
+@* ************** Content ************** *@
+<!-- Hour chart  -->
+<div class="card bg-transparent shadow-none my-6 border-0">
+  <div class="card-body row p-0 pb-6 g-6">
+    <div class="col-12 col-lg-8 card-separator">
+      <h5 class="mb-2">Welcome back,<span class="h4"> Felecia 👋🏻</span></h5>
+      <div class="col-12 col-lg-5">
+        <p>Your progress this week is Awesome. let's keep it up and get a lot of points reward !</p>
+      </div>
+      <div class="d-flex justify-content-between flex-wrap gap-4 me-12">
+        <div class="d-flex align-items-center gap-4 me-6 me-sm-0">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-primary rounded">
+              <div class="text-primary">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Laptop">
+                    <path id="Vector" opacity="0.2" d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125H5.9375Z" fill="currentColor" />
+                    <path
+                      id="Vector_2"
+                      d="M5.9375 26.125V10.6875C5.9375 10.0576 6.18772 9.45352 6.63312 9.00812C7.07852 8.56272 7.68261 8.3125 8.3125 8.3125H29.6875C30.3174 8.3125 30.9215 8.56272 31.3669 9.00812C31.8123 9.45352 32.0625 10.0576 32.0625 10.6875V26.125M21.375 13.0625H16.625M3.5625 26.125H34.4375V28.5C34.4375 29.1299 34.1873 29.734 33.7419 30.1794C33.2965 30.6248 32.6924 30.875 32.0625 30.875H5.9375C5.30761 30.875 4.70352 30.6248 4.25812 30.1794C3.81272 29.734 3.5625 29.1299 3.5625 28.5V26.125Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Hours Spent</p>
+            <h4 class="text-primary mb-0">34h</h4>
+          </div>
+        </div>
+        <div class="d-flex align-items-center gap-4">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-info rounded">
+              <div class="text-info">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Lightbulb">
+                    <path
+                      id="Vector"
+                      opacity="0.2"
+                      d="M11.6822 24.7891C10.2684 23.6898 9.12342 22.2832 8.33388 20.6759C7.54435 19.0685 7.13099 17.3025 7.12513 15.5117C7.09544 9.06954 12.2759 3.71095 18.7181 3.56251C21.2113 3.50341 23.6599 4.23078 25.7166 5.64147C27.7732 7.05217 29.3335 9.07457 30.1761 11.4219C31.0188 13.7691 31.101 16.3221 30.4112 18.7188C29.7214 21.1154 28.2945 23.2341 26.3329 24.7742C25.8996 25.1092 25.5486 25.5388 25.3068 26.0301C25.065 26.5215 24.9387 27.0617 24.9376 27.6094V28.5C24.9376 28.815 24.8125 29.117 24.5898 29.3397C24.3671 29.5624 24.0651 29.6875 23.7501 29.6875H14.2501C13.9352 29.6875 13.6331 29.5624 13.4104 29.3397C13.1877 29.117 13.0626 28.815 13.0626 28.5V27.6094C13.0589 27.0658 12.9329 26.5301 12.6939 26.0418C12.4549 25.5536 12.1091 25.1255 11.6822 24.7891Z"
+                      fill="currentColor" />
+                    <path
+                      id="Union"
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M25.1509 6.46609C23.2675 5.17419 21.0251 4.50807 18.7418 4.5622L18.7411 4.56221C18.4983 4.56781 18.2574 4.58151 18.0187 4.60305L18.6951 2.56275C21.398 2.49881 24.0526 3.28743 26.2822 4.8168C28.512 6.34629 30.2037 8.53899 31.1173 11.0839C32.031 13.6289 32.1201 16.3969 31.3722 18.9954C30.6243 21.5938 29.0772 23.8909 26.9505 25.5607L26.9445 25.5654L26.9445 25.5654C26.6318 25.8071 26.3785 26.1171 26.204 26.4717C26.0295 26.8263 25.9384 27.2161 25.9376 27.6113V28.5C25.9376 29.0801 25.7072 29.6365 25.2969 30.0468C24.8867 30.457 24.3303 30.6875 23.7501 30.6875H14.2501C13.67 30.6875 13.1136 30.457 12.7033 30.0468C12.2931 29.6365 12.0626 29.0801 12.0626 28.5V27.6131C12.0595 27.2206 11.9683 26.8339 11.7957 26.4815C11.6232 26.1289 11.3737 25.8196 11.0656 25.5764L11.7414 23.5378C11.9208 23.6976 12.1057 23.8517 12.296 23.9996L11.6821 24.7891L12.301 24.0035C12.8459 24.4328 13.2871 24.9792 13.5921 25.6022C13.8971 26.2252 14.0579 26.9089 14.0626 27.6025L14.0627 27.6094L14.0626 28.5C14.0626 28.5497 14.0824 28.5974 14.1175 28.6326C14.1527 28.6677 14.2004 28.6875 14.2501 28.6875H23.7501C23.7999 28.6875 23.8475 28.6677 23.8827 28.6326C23.9179 28.5974 23.9376 28.5497 23.9376 28.5V27.6094L23.9376 27.6074C23.939 26.9073 24.1004 26.2167 24.4096 25.5885C24.7181 24.9616 25.1657 24.4133 25.7181 23.9855C27.5131 22.5752 28.8188 20.6359 29.4502 18.4422C30.082 16.2473 30.0067 13.9093 29.235 11.7597C28.4633 9.61009 27.0344 7.75799 25.1509 6.46609ZM11.7414 23.5378L11.7414 23.5378L18.0187 4.60305L18.018 4.6031L18.6944 2.56276C11.7043 2.72418 6.09331 8.53234 6.12513 15.5156C6.13159 17.458 6.57998 19.3733 7.43632 21.1167C8.29225 22.8593 9.53332 24.3843 11.0656 25.5764L11.7414 23.5378ZM11.7414 23.5378C10.7009 22.6109 9.84781 21.4898 9.23145 20.235C8.50882 18.7638 8.13049 17.1475 8.12512 15.5084L8.12512 15.5071C8.09905 9.84987 12.4637 5.10456 18.018 4.6031L11.7414 23.5378ZM12.0627 34.4375C12.0627 33.8852 12.5104 33.4375 13.0627 33.4375H24.9377C25.49 33.4375 25.9377 33.8852 25.9377 34.4375C25.9377 34.9898 25.49 35.4375 24.9377 35.4375H13.0627C12.5104 35.4375 12.0627 34.9898 12.0627 34.4375ZM20.3697 7.44532C19.8252 7.35302 19.3089 7.71961 19.2166 8.26412C19.1243 8.80864 19.4909 9.32489 20.0354 9.41719C21.2827 9.62862 22.4336 10.222 23.3292 11.1154C24.2249 12.0087 24.8212 13.1581 25.0358 14.4048C25.1295 14.9491 25.6467 15.3144 26.191 15.2207C26.7353 15.127 27.1005 14.6098 27.0068 14.0655C26.722 12.4107 25.9305 10.8851 24.7417 9.69934C23.5528 8.51353 22.0252 7.72596 20.3697 7.44532Z"
+                      fill="currentColor" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Test Results</p>
+            <h4 class="text-info mb-0">82%</h4>
+          </div>
+        </div>
+        <div class="d-flex align-items-center gap-4">
+          <div class="avatar avatar-lg">
+            <div class="avatar-initial bg-label-warning rounded">
+              <div class="text-warning">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g id="Check">
+                    <path
+                      id="Vector"
+                      opacity="0.2"
+                      d="M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23438 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65938 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23438 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65938 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
+                      fill="currentColor" />
+                    <path
+                      id="Vector_2"
+                      d="M25.5312 15.4375L16.818 23.75L12.4687 19.5937M8.08984 29.9102C6.72422 28.5445 7.62969 25.6797 6.93203 24.0023C6.23437 22.325 3.5625 20.8555 3.5625 19C3.5625 17.1445 6.20469 15.7344 6.93203 13.9977C7.65937 12.2609 6.72422 9.45547 8.08984 8.08984C9.45547 6.72422 12.3203 7.62969 13.9977 6.93203C15.675 6.23437 17.1445 3.5625 19 3.5625C20.8555 3.5625 22.2656 6.20469 24.0023 6.93203C25.7391 7.65937 28.5445 6.72422 29.9102 8.08984C31.2758 9.45547 30.3703 12.3203 31.068 13.9977C31.7656 15.675 34.4375 17.1445 34.4375 19C34.4375 20.8555 31.7953 22.2656 31.068 24.0023C30.3406 25.7391 31.2758 28.5445 29.9102 29.9102C28.5445 31.2758 25.6797 30.3703 24.0023 31.068C22.325 31.7656 20.8555 34.4375 19 34.4375C17.1445 34.4375 15.7344 31.7953 13.9977 31.068C12.2609 30.3406 9.45547 31.2758 8.08984 29.9102Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round" />
+                  </g>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="content-right">
+            <p class="mb-0 fw-medium">Course Completed</p>
+            <h4 class="text-warning mb-0">14</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-lg-4 ps-md-4 ps-lg-6">
+      <div class="d-flex justify-content-between align-items-center">
+        <div>
+          <div>
+            <h5 class="mb-1">Time Spendings</h5>
+            <p class="mb-9">Weekly report</p>
+          </div>
+          <div class="time-spending-chart">
+            <h4 class="mb-2">231<span class="text-body">h</span> 14<span class="text-body">m</span></h4>
+            <span class="badge bg-label-success">+18.4%</span>
+          </div>
+        </div>
+        <div id="leadsReportChart"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Hour chart End  -->
+
+<!-- Topic and Instructors -->
+<div class="row mb-6 g-6">
+  <div class="col-12 col-xl-8">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title m-0 me-2">Topic you are interested in</h5>
+        <div class="dropdown">
+          <button class="btn p-0" type="button" id="topic" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
+            <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
+            <a class="dropdown-item" href="javascript:void(0);">See All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body row g-3">
+        <div class="col-md-8">
+          <div id="horizontalBarChart"></div>
+        </div>
+        <div class="col-md-4 d-flex justify-content-around align-items-center">
+          <div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-primary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">UI Design</p>
+                <h5>35%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline my-12">
+              <span class="text-success me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">Music</p>
+                <h5>14%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-danger me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">React</p>
+                <h5>10%</h5>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-info me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">UX Design</p>
+                <h5>20%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline my-12">
+              <span class="text-secondary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">Animation</p>
+                <h5>12%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-warning me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">SEO</p>
+                <h5>9%</h5>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="m-0 me-2">Popular Instructors</h5>
+        </div>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="popularInstructors" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularInstructors">
+            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="px-5 py-4 border border-start-0 border-end-0">
+        <div class="d-flex justify-content-between align-items-center">
+          <p class="mb-0 text-uppercase">Instructors</p>
+          <p class="mb-0 text-uppercase">courses</p>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Maven Analytics</h6>
+                <small class="text-truncate text-body">Business Intelligence</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">33</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="~/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Bentlee Emblin</h6>
+                <small class="text-truncate text-body">Digital Marketing</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">52</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mb-6">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="~/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Benedetto Rossiter</h6>
+                <small class="text-truncate text-body">UI/UX Design</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">12</h6>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex align-items-center">
+            <div class="avatar avatar me-4">
+              <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div>
+              <div>
+                <h6 class="mb-0 text-truncate">Beverlie Krabbe</h6>
+                <small class="text-truncate text-body">React Native</small>
+              </div>
+            </div>
+          </div>
+          <div class="text-end">
+            <h6 class="mb-0">8</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title m-0 me-2">Top Courses</h5>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="topCourses" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topCourses">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="list-unstyled mb-0">
+          <li class="d-flex mb-6 align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-video icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Videography Basic Design Course</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">1.2k Views</div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6 align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-code icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Basic Front-end Development Course</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">834 Views</div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6 align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <span class="avatar-initial rounded bg-label-success"><i class="icon-base ti tabler-camera icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Basic Fundamentals of Photography</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">3.7k Views</div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6 align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-brand-dribbble icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Advance Dribble Base Visual Design</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">2.5k Views</div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-microphone-2 icon-lg"></i></span>
+            </div>
+            <div class="row w-100 align-items-center">
+              <div class="col-sm-8 col-md-12 col-xxl-8 mb-1 mb-sm-0 mb-md-1 mb-xxl-0">
+                <h6 class="mb-0">Your First Singing Lesson</h6>
+              </div>
+              <div class="col-sm-4 col-md-12 col-xxl-4 d-flex justify-content-xxl-end">
+                <div class="badge bg-label-secondary">948 Views</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="bg-label-primary rounded-3 text-center mb-4 pt-6">
+          <img class="img-fluid" src="~/img/illustrations/girl-with-laptop.png" alt="Card girl image" width="140" />
+        </div>
+        <h5 class="mb-2">Upcoming Webinar</h5>
+        <p class="small">Next Generation Frontend Architecture Using Layout Engine And React Native Web.</p>
+        <div class="row mb-4 g-3">
+          <div class="col-6">
+            <div class="d-flex align-items-center">
+              <div class="avatar flex-shrink-0 me-3">
+                <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-calendar-event icon-28px"></i></span>
+              </div>
+              <div>
+                <h6 class="mb-0 text-nowrap">17 Nov 23</h6>
+                <small>Date</small>
+              </div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="d-flex align-items-center">
+              <div class="avatar flex-shrink-0 me-3">
+                <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-clock icon-28px"></i></span>
+              </div>
+              <div>
+                <h6 class="mb-0 text-nowrap">32 minutes</h6>
+                <small>Duration</small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 text-center">
+          <a href="javascript:void(0);" class="btn btn-primary w-100 d-grid">Join the event</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title m-0 me-2">Assignment Progress</h5>
+        <div class="dropdown">
+          <button class="btn text-body-secondary p-0" type="button" id="assignmentProgress" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="assignmentProgress">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="primary" data-series="72" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">User experience Design</h6>
+                  <p class="mb-0 small">120 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="success" data-series="48" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">Basic fundamentals</h6>
+                  <p class="mb-0 small">32 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-4 pb-1">
+            <div class="chart-progress me-4" data-color="danger" data-series="15" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">React native components</h6>
+                  <p class="mb-0 small">182 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex">
+            <div class="chart-progress me-4" data-color="info" data-series="24" data-progress_variant="true"></div>
+            <div class="row w-100 align-items-center">
+              <div class="col-9">
+                <div class="me-2">
+                  <h6 class="mb-1">Basic of music theory</h6>
+                  <p class="mb-0 small">56 Tasks</p>
+                </div>
+              </div>
+              <div class="col-3 text-end">
+                <button type="button" class="btn btn-sm btn-icon btn-label-secondary">
+                  <i class="icon-base ti tabler-chevron-right icon-20px scaleX-n1-rtl"></i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+<!--  Topic and Instructors  End-->
+
+<!-- Course datatable -->
+<div class="card mb-6">
+  <div class="mb-4">
+    <table class="table datatables-academy-course">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Course Name</th>
+          <th>Time</th>
+          <th class="w-25">Progress</th>
+          <th class="w-25">Status</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+<!-- Course datatable End -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Academy/MyCourse.cshtml

@@ -0,0 +1,330 @@
+@{
+  ViewData["Title"] = "My Courses - Academy";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/plyr/plyr.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/plyr/plyr.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-academy.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-academy-course.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-academy">
+  <div class="card p-0 mb-6">
+    <div class="card-body d-flex flex-column flex-md-row justify-content-between p-0 pt-6">
+      <div class="app-academy-md-25 card-body py-0 pt-6 ps-12">
+        <img src="~/img/illustrations/bulb-light.png" class="img-fluid app-academy-img-height scaleX-n1-rtl" alt="Bulb in hand" data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png" height="90" />
+      </div>
+      <div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-6 py-6">
+        <span class="card-title mb-4 lh-lg px-md-12 h4 text-heading">
+          Education, talents, and career<br />
+          opportunities. <span class="text-primary text-nowrap">All in one place</span>.
+        </span>
+        <p class="mb-4">
+          Grow your skill with the most reliable online courses and certifications in<br />
+          marketing, information technology, programming, and data science.
+        </p>
+        <div class="d-flex align-items-center justify-content-between app-academy-md-80">
+          <input type="search" placeholder="Find your course" class="form-control me-4" />
+          <button type="submit" class="btn btn-primary btn-icon"><i class="icon-base ti tabler-search icon-22px"></i></button>
+        </div>
+      </div>
+      <div class="app-academy-md-25 d-flex align-items-end justify-content-end">
+        <img src="~/img/illustrations/pencil-rocket.png" alt="pencil rocket" height="188" class="scaleX-n1-rtl" />
+      </div>
+    </div>
+  </div>
+
+  <div class="card mb-6">
+    <div class="card-header d-flex flex-wrap justify-content-between gap-4">
+      <div class="card-title mb-0 me-1">
+        <h5 class="mb-0">My Courses</h5>
+        <p class="mb-0">Total 6 course you have purchased</p>
+      </div>
+      <div class="d-flex justify-content-md-end align-items-center column-gap-6 flex-sm-row flex-column row-gap-4">
+        <select class="form-select">
+          <option value="">All Courses</option>
+          <option value="ui/ux">UI/UX</option>
+          <option value="seo">SEO</option>
+          <option value="web">Web</option>
+          <option value="music">Music</option>
+          <option value="painting">Painting</option>
+        </select>
+
+        <div class="form-check form-switch my-2 ms-2">
+          <input type="checkbox" class="form-check-input" id="CourseSwitch" />
+          <label class="form-check-label text-nowrap mb-0" for="CourseSwitch">Hide completed</label>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="row gy-6 mb-6">
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-1.png" alt="tutor image 1" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-primary">Web</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  4.4 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal">(1.23k)</span>
+                </p>
+              </div>
+              <a href="CourseDetails" class="h5">Basics of Angular</a>
+              <p class="mt-1">Introductory course for Angular and framework basics in web development.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="CourseDetails"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle scaleX-n1-rtl me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="CourseDetails"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-2.png" alt="tutor image 2" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4 pe-xl-4 pe-xxl-0">
+                <span class="badge bg-label-danger">UI/UX</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  4.2 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (424)</span>
+                </p>
+              </div>
+              <a class="h5" href="CourseDetails">Figma & More</a>
+              <p class="mt-1">Introductory course for design and framework basics in web development.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="CourseDetails"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="CourseDetails"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-3.png" alt="tutor image 3" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-success">SEO</span>
+                <p class="d-flex align-items-center justify-content-center fw-medium gap-1 mb-0">
+                  5 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (12)</span>
+                </p>
+              </div>
+              <a class="h5" href="CourseDetails">Keyword Research</a>
+              <p class="mt-1">Keyword suggestion tool provides comprehensive details & keyword suggestions.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>7 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-50" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="CourseDetails"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="CourseDetails"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-4.png" alt="tutor image 4" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-info">Music</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  3.8 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (634)</span>
+                </p>
+              </div>
+              <a class="h5" href="CourseDetails">Basics to Advanced</a>
+              <p class="mt-1">20 more lessons like this about music production, writing, mixing, mastering</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>30 minutes</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="CourseDetails"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="CourseDetails"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-5.png" alt="tutor image 5" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-warning">Painting</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  4.7 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (34)</span>
+                </p>
+              </div>
+              <a class="h5" href="CourseDetails">Art & Drawing</a>
+              <p class="mt-1">Easy-to-follow video & guides show you how to draw animals, people & more.</p>
+              <p class="d-flex align-items-center text-success mb-1"><i class="icon-base ti tabler-check me-1"></i>Completed</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <a class="w-100 btn btn-label-primary" href="CourseDetails"><i class="icon-base ti tabler-rotate-clockwise-2 icon-xs me-1_5"></i>Start Over</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-4">
+          <div class="card p-2 h-100 shadow-none border">
+            <div class="rounded-2 text-center mb-4">
+              <a href="CourseDetails"><img class="img-fluid" src="~/img/pages/app-academy-tutor-6.png" alt="tutor image 6" /></a>
+            </div>
+            <div class="card-body p-4 pt-2">
+              <div class="d-flex justify-content-between align-items-center mb-4">
+                <span class="badge bg-label-danger">UI/UX</span>
+                <p class="d-flex align-items-center justify-content-center gap-1 mb-0">
+                  3.6 <span class="text-warning"><i class="icon-base ti tabler-star-filled icon-lg me-1 mb-1_5"></i></span><span class="fw-normal"> (2.5k)</span>
+                </p>
+              </div>
+              <a class="h5" href="CourseDetails">Basics Fundamentals</a>
+              <p class="mt-1">This guide will help you develop a systematic approach user interface.</p>
+              <p class="d-flex align-items-center mb-1"><i class="icon-base ti tabler-clock me-1"></i>16 hours</p>
+              <div class="progress mb-4" style="height: 8px">
+                <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <div class="d-flex flex-column flex-md-row gap-4 text-nowrap flex-wrap flex-md-nowrap flex-lg-wrap flex-xxl-nowrap">
+                <a class="w-100 btn btn-label-secondary d-flex align-items-center" href="CourseDetails"> <i class="icon-base ti tabler-rotate-clockwise-2 icon-xs align-middle me-2"></i><span>Start Over</span> </a>
+                <a class="w-100 btn btn-label-primary d-flex align-items-center" href="CourseDetails"> <span class="me-2">Continue</span><i class="icon-base ti tabler-chevron-right icon-xs lh-1 scaleX-n1-rtl"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav aria-label="Page navigation" class="d-flex align-items-center justify-content-center">
+        <ul class="pagination mb-0 pagination-rounded">
+          <li class="page-item first disabled">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item prev disabled">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">1</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">2</a>
+          </li>
+          <li class="page-item active">
+            <a class="page-link" href="javascript:void(0);">3</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">4</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">5</a>
+          </li>
+          <li class="page-item">
+            <a class="page-link" href="javascript:void(0);">6</a>
+          </li>
+          <li class="page-item next">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-xs scaleX-n1-rtl"></i></a>
+          </li>
+          <li class="page-item last">
+            <a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm scaleX-n1-rtl"></i></a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <div class="row gy-6 mb-6">
+    <div class="col-lg-6">
+      <div class="card shadow-none bg-label-primary h-100">
+        <div class="card-body d-flex justify-content-between flex-wrap-reverse">
+          <div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
+            <div class="card-title">
+              <h5 class="text-primary mb-2">Earn a Certificate</h5>
+              <p class="text-body w-sm-80 app-academy-xl-100">Get the right professional certificate program for you.</p>
+            </div>
+            <div class="mb-0"><button class="btn btn-sm btn-primary">View Programs</button></div>
+          </div>
+          <div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
+            <img class="img-fluid scaleX-n1-rtl" src="~/img/illustrations/boy-app-academy.png" alt="boy illustration" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="card shadow-none bg-label-danger h-100">
+        <div class="card-body d-flex justify-content-between flex-wrap-reverse">
+          <div class="mb-0 w-100 app-academy-sm-60 d-flex flex-column justify-content-between text-center text-sm-start">
+            <div class="card-title">
+              <h5 class="text-danger mb-2">Best Rated Courses</h5>
+              <p class="text-body app-academy-sm-60 app-academy-xl-100">Enroll now in the most popular and best rated courses.</p>
+            </div>
+            <div class="mb-0"><button class="btn btn-sm btn-danger">View Courses</button></div>
+          </div>
+          <div class="w-100 app-academy-sm-40 d-flex justify-content-center justify-content-sm-end h-px-150 mb-4 mb-sm-0">
+            <img class="img-fluid scaleX-n1-rtl" src="~/img/illustrations/girl-app-academy.png" alt="girl illustration" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-body row gy-6">
+      <div class="col-sm-12 col-lg-4 text-center pt-md-12 px-4">
+        <span class="badge bg-label-primary rounded mb-4 h-px-52 w-px-52 p-2"><i class="icon-base ti tabler-gift icon-36px"></i></span>
+        <h4 class="card-title mb-4">Today's Free Courses</h4>
+        <p class="card-text">We offers 284 Free Online courses from top tutors and companies to help you start or advance your career skills. Learn online for free and fast today!</p>
+        <button class="btn btn-primary">Get premium courses</button>
+      </div>
+      <div class="col-12 col-md-6 col-lg-4">
+        <div class="card h-100 shadow-none border">
+          <div class="p-2 pb-0">
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player" playsinline controls>
+              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="card-body">
+            <h5 class="card-title">Your First Singing Lesson</h5>
+            <p class="card-text">In the same way as any other artistic domain, singing lends itself perfectly to self-teaching.</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-6 col-lg-4">
+        <div class="card h-100 shadow-none border">
+          <div class="p-2 pb-0">
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="guitar-video-player-2" playsinline controls>
+              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div class="card-body">
+            <h5 class="card-title">Guitar for Beginners</h5>
+            <p class="card-text">The Fender Acoustic Guitar is the best choice for both beginners and professionals offering a great sound.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Access/Permission.cshtml

@@ -0,0 +1,48 @@
+@{
+  ViewData["Title"] = "Permission - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-access-permission.js"></script>
+<script src="~/js/modal-add-permission.js"></script>
+<script src="~/js/modal-edit-permission.js"></script>
+}
+
+@* ************** Content ************** *@
+<!-- Permission Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-permissions table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Name</th>
+          <th>Assigned To</th>
+          <th>Created Date</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+<!--/ Permission Table -->
+
+<!-- Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalAddPermission")
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditPermission")
+<!-- /Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Access/Roles.cshtml

@@ -0,0 +1,234 @@
+@{
+  ViewData["Title"] = "Roles - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-access-roles.js"></script>
+<script src="~/js/modal-add-role.js"></script>
+}
+
+@* ************** Content ************** *@
+<h4 class="mb-1">Roles List</h4>
+
+<p class="mb-6">
+  A role provided access to predefined menus and features so that depending on <br />
+  assigned role an administrator can have access to what user needs.
+</p>
+<!-- Role cards -->
+<div class="row g-6">
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 4 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/5.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/12.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/6.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kaith D'souza" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/3.png" alt="Avatar" />
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Administrator</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 7 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Jimmy Ressula" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/4.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="John Doe" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/1.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kristi Lawker" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/2.png" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="4 more">+4</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Manager</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 5 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Andrew Tye" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/6.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rishi Swaat" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/9.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Rossie Kim" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/12.png" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2 more">+2</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Users</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 3 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Karlos" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/3.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Katy Turner" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/9.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Peter Adward" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/4.png" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Support</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+          <h6 class="fw-normal mb-0 text-body">Total 2 users</h6>
+          <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Kim Merchent" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/10.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Sam D'souza" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/13.png" alt="Avatar" />
+            </li>
+            <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Nurvi Karlos" class="avatar pull-up">
+              <img class="rounded-circle" src="~/img/avatars/5.png" alt="Avatar" />
+            </li>
+            <li class="avatar">
+              <span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="7 more">+7</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex justify-content-between align-items-end">
+          <div class="role-heading">
+            <h5 class="mb-1">Restricted User</h5>
+            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addRoleModal" class="role-edit-modal"><span>Edit Role</span></a>
+          </div>
+          <a href="javascript:void(0);"><i class="icon-base ti tabler-copy icon-md text-heading"></i></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-4 col-lg-6 col-md-6">
+    <div class="card h-100">
+      <div class="row h-100">
+        <div class="col-sm-5">
+          <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-4">
+            <img src="~/img/illustrations/add-new-roles.png" class="img-fluid" alt="Image" width="83" />
+          </div>
+        </div>
+        <div class="col-sm-7">
+          <div class="card-body text-sm-end text-center ps-sm-0">
+            <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">Add New Role</button>
+            <p class="mb-0">
+              Add new role, <br />
+              if it doesn't exist.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-12">
+    <h4 class="mt-6 mb-1">Total users with their roles</h4>
+    <p class="mb-0">Find all of your company’s administrator accounts and their associate roles.</p>
+  </div>
+  <div class="col-12">
+    <!-- Role Table -->
+    <div class="card">
+      <div class="card-datatable">
+        <table class="datatables-users table border-top">
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+              <th>User</th>
+              <th>Role</th>
+              <th>Plan</th>
+              <th>Billing</th>
+              <th>Status</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+    <!--/ Role Table -->
+  </div>
+</div>
+<!--/ Role cards -->
+
+<!-- Add Role Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalAddRole")
+<!-- / Add Role Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Apps/Calendar.cshtml

@@ -0,0 +1,166 @@
+@{
+  ViewData["Title"] = "Fullcalendar - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/fullcalendar/fullcalendar.css" />
+<link rel="stylesheet" href="~/vendor/libs/flatpickr/flatpickr.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/fullcalendar/fullcalendar.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/flatpickr/flatpickr.js"></script>
+<script src="~/vendor/libs/moment/moment.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-calendar.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-calendar-events.js"></script>
+<script src="~/js/app-calendar.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="card app-calendar-wrapper">
+  <div class="row g-0">
+    <!-- Calendar Sidebar -->
+    <div class="col app-calendar-sidebar border-end" id="app-calendar-sidebar">
+      <div class="border-bottom p-6 my-sm-0 mb-4">
+        <button class="btn btn-primary btn-toggle-sidebar w-100" data-bs-toggle="offcanvas" data-bs-target="#addEventSidebar" aria-controls="addEventSidebar">
+          <i class="icon-base ti tabler-plus icon-16px me-2"></i>
+          <span class="align-middle">Add Event</span>
+        </button>
+      </div>
+      <div class="px-3 pt-2">
+        <!-- inline calendar (flatpicker) -->
+        <div class="inline-calendar"></div>
+      </div>
+      <hr class="mb-6 mx-n4 mt-3" />
+      <div class="px-6 pb-2">
+        <!-- Filter -->
+        <div>
+          <h5>Event Filters</h5>
+        </div>
+
+        <div class="form-check form-check-secondary mb-5 ms-2">
+          <input class="form-check-input select-all" type="checkbox" id="selectAll" data-value="all" checked />
+          <label class="form-check-label" for="selectAll">View All</label>
+        </div>
+
+        <div class="app-calendar-events-filter text-heading">
+          <div class="form-check form-check-danger mb-5 ms-2">
+            <input class="form-check-input input-filter" type="checkbox" id="select-personal" data-value="personal" checked />
+            <label class="form-check-label" for="select-personal">Personal</label>
+          </div>
+          <div class="form-check mb-5 ms-2">
+            <input class="form-check-input input-filter" type="checkbox" id="select-business" data-value="business" checked />
+            <label class="form-check-label" for="select-business">Business</label>
+          </div>
+          <div class="form-check form-check-warning mb-5 ms-2">
+            <input class="form-check-input input-filter" type="checkbox" id="select-family" data-value="family" checked />
+            <label class="form-check-label" for="select-family">Family</label>
+          </div>
+          <div class="form-check form-check-success mb-5 ms-2">
+            <input class="form-check-input input-filter" type="checkbox" id="select-holiday" data-value="holiday" checked />
+            <label class="form-check-label" for="select-holiday">Holiday</label>
+          </div>
+          <div class="form-check form-check-info ms-2">
+            <input class="form-check-input input-filter" type="checkbox" id="select-etc" data-value="etc" checked />
+            <label class="form-check-label" for="select-etc">ETC</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Calendar Sidebar -->
+
+    <!-- Calendar & Modal -->
+    <div class="col app-calendar-content">
+      <div class="card shadow-none border-0">
+        <div class="card-body pb-0">
+          <!-- FullCalendar -->
+          <div id="calendar"></div>
+        </div>
+      </div>
+      <div class="app-overlay"></div>
+      <!-- FullCalendar Offcanvas -->
+      <div class="offcanvas offcanvas-end event-sidebar" tabindex="-1" id="addEventSidebar" aria-labelledby="addEventSidebarLabel">
+        <div class="offcanvas-header border-bottom">
+          <h5 class="offcanvas-title" id="addEventSidebarLabel">Add Event</h5>
+          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+          <form class="event-form pt-0" id="eventForm" onsubmit="return false">
+            <div class="mb-5 form-control-validation">
+              <label class="form-label" for="eventTitle">Title</label>
+              <input type="text" class="form-control" id="eventTitle" name="eventTitle" placeholder="Event Title" />
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="eventLabel">Label</label>
+              <select class="select2 select-event-label form-select" id="eventLabel" name="eventLabel">
+                <option data-label="primary" value="Business" selected>Business</option>
+                <option data-label="danger" value="Personal">Personal</option>
+                <option data-label="warning" value="Family">Family</option>
+                <option data-label="success" value="Holiday">Holiday</option>
+                <option data-label="info" value="ETC">ETC</option>
+              </select>
+            </div>
+            <div class="mb-5 form-control-validation">
+              <label class="form-label" for="eventStartDate">Start Date</label>
+              <input type="text" class="form-control" id="eventStartDate" name="eventStartDate" placeholder="Start Date" />
+            </div>
+            <div class="mb-5 form-control-validation">
+              <label class="form-label" for="eventEndDate">End Date</label>
+              <input type="text" class="form-control" id="eventEndDate" name="eventEndDate" placeholder="End Date" />
+            </div>
+            <div class="mb-5">
+              <div class="form-check form-switch">
+                <input type="checkbox" class="form-check-input allDay-switch" id="allDaySwitch" />
+                <label class="form-check-label" for="allDaySwitch">All Day</label>
+              </div>
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="eventURL">Event URL</label>
+              <input type="url" class="form-control" id="eventURL" name="eventURL" placeholder="https://www.google.com" />
+            </div>
+            <div class="mb-4 select2-primary">
+              <label class="form-label" for="eventGuests">Add Guests</label>
+              <select class="select2 select-event-guests form-select" id="eventGuests" name="eventGuests" multiple>
+                <option data-avatar="1.png" value="Jane Foster">Jane Foster</option>
+                <option data-avatar="3.png" value="Donna Frank">Donna Frank</option>
+                <option data-avatar="5.png" value="Gabrielle Robertson">Gabrielle Robertson</option>
+                <option data-avatar="7.png" value="Lori Spears">Lori Spears</option>
+                <option data-avatar="9.png" value="Sandy Vega">Sandy Vega</option>
+                <option data-avatar="11.png" value="Cheryl May">Cheryl May</option>
+              </select>
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="eventLocation">Location</label>
+              <input type="text" class="form-control" id="eventLocation" name="eventLocation" placeholder="Enter Location" />
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="eventDescription">Description</label>
+              <textarea class="form-control" name="eventDescription" id="eventDescription"></textarea>
+            </div>
+            <div class="d-flex justify-content-sm-between justify-content-start mt-6 gap-2">
+              <div class="d-flex">
+                <button type="submit" id="addEventBtn" class="btn btn-primary btn-add-event me-4">Add</button>
+                <button type="reset" class="btn btn-label-secondary btn-cancel me-sm-0 me-1" data-bs-dismiss="offcanvas">Cancel</button>
+              </div>
+              <button class="btn btn-label-danger btn-delete-event d-none">Delete</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <!-- /Calendar & Modal -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Apps/Chat.cshtml

@@ -0,0 +1,607 @@
+@{
+  ViewData["Title"] = "Chat - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/maxLength/maxLength.css" />
+}
+
+@section PageStyles {
+ <link rel="stylesheet" href="~/vendor/css/pages/app-chat.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-chat.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-chat card overflow-hidden">
+  <div class="row g-0">
+    <!-- Sidebar Left -->
+    <div class="col app-chat-sidebar-left app-sidebar overflow-hidden" id="app-chat-sidebar-left">
+      <div class="chat-sidebar-left-user sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-6 pt-12">
+        <div class="avatar avatar-xl avatar-online chat-sidebar-avatar">
+          <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+        </div>
+        <h5 class="mt-4 mb-0">John Doe</h5>
+        <span>Admin</span>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer close-sidebar" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left"></i>
+      </div>
+      <div class="sidebar-body px-6 pb-6">
+        <div class="my-6">
+          <div class="maxLength-wrapper">
+            <label for="chat-sidebar-left-user-about" class="text-uppercase text-body-secondary mb-1">About</label>
+            <textarea id="chat-sidebar-left-user-about" class="form-control chat-sidebar-left-user-about maxLength-example" rows="3" maxlength="120">Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.</textarea>
+            <small id="textarea-maxlength-info"></small>
+          </div>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Status</p>
+          <div class="d-grid gap-2 pt-2 text-heading ms-2">
+            <div class="form-check form-check-success">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="active" id="user-active" checked />
+              <label class="form-check-label" for="user-active">Online</label>
+            </div>
+            <div class="form-check form-check-warning">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="away" id="user-away" />
+              <label class="form-check-label" for="user-away">Away</label>
+            </div>
+            <div class="form-check form-check-danger">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="busy" id="user-busy" />
+              <label class="form-check-label" for="user-busy">Do not Disturb</label>
+            </div>
+            <div class="form-check form-check-secondary">
+              <input name="chat-user-status" class="form-check-input" type="radio" value="offline" id="user-offline" />
+              <label class="form-check-label" for="user-offline">Offline</label>
+            </div>
+          </div>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Settings</p>
+          <ul class="list-unstyled d-grid gap-4 ms-2 pt-2 text-heading">
+            <li class="d-flex justify-content-between align-items-center">
+              <div>
+                <i class="icon-base ti tabler-lock icon-md me-1"></i>
+                <span class="align-middle">Two-step Verification</span>
+              </div>
+              <div class="form-check form-switch mb-0 me-1">
+                <input type="checkbox" class="form-check-input" checked />
+              </div>
+            </li>
+            <li class="d-flex justify-content-between align-items-center">
+              <div>
+                <i class="icon-base ti tabler-bell icon-md me-1"></i>
+                <span class="align-middle">Notification</span>
+              </div>
+              <div class="form-check form-switch mb-0 me-1">
+                <input type="checkbox" class="form-check-input" />
+              </div>
+            </li>
+            <li>
+              <i class="icon-base ti tabler-user-plus icon-md me-1"></i>
+              <span class="align-middle">Invite Friends</span>
+            </li>
+            <li>
+              <i class="icon-base ti tabler-trash icon-md me-1"></i>
+              <span class="align-middle">Delete Account</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex mt-6">
+          <button class="btn btn-primary w-100" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left">Logout<i class="icon-base ti tabler-logout icon-16px ms-2"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- /Sidebar Left-->
+
+    <!-- Chat & Contacts -->
+    <div class="col app-chat-contacts app-sidebar flex-grow-0 overflow-hidden border-end" id="app-chat-contacts">
+      <div class="sidebar-header h-px-75 px-5 border-bottom d-flex align-items-center">
+        <div class="d-flex align-items-center me-6 me-lg-0">
+          <div class="flex-shrink-0 avatar avatar-online me-4" data-bs-toggle="sidebar" data-overlay="app-overlay-ex" data-target="#app-chat-sidebar-left">
+            <img class="user-avatar rounded-circle cursor-pointer" src="~/img/avatars/1.png" alt="Avatar" />
+          </div>
+          <div class="flex-grow-1 input-group input-group-merge">
+            <span class="input-group-text" id="basic-addon-search31"><i class="icon-base ti tabler-search icon-xs"></i></span>
+            <input type="text" class="form-control chat-search-input" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31" />
+          </div>
+        </div>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer position-absolute top-50 end-0 translate-middle d-lg-none d-block" data-overlay data-bs-toggle="sidebar" data-target="#app-chat-contacts"></i>
+      </div>
+      <div class="sidebar-body">
+        <!-- Chats -->
+        <ul class="list-unstyled chat-contact-list py-2 mb-0" id="chat-list">
+          <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
+            <h5 class="text-primary mb-0">Chats</h5>
+          </li>
+          <li class="chat-contact-list-item chat-list-item-0 d-none">
+            <h6 class="text-body-secondary mb-0">No Chats Found</h6>
+          </li>
+          <li class="chat-contact-list-item mb-1">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-online">
+                <img src="~/img/avatars/13.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate m-0 fw-normal">Waldemar Mannering</h6>
+                  <small class="chat-contact-list-item-time">5 Minutes</small>
+                </div>
+                <small class="chat-contact-status text-truncate">Refer friends. Get rewards.</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-1">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-offline">
+                <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate fw-normal m-0">Felecia Rower</h6>
+                  <small class="chat-contact-list-item-time">30 Minutes</small>
+                </div>
+                <small class="chat-contact-status text-truncate">I will purchase it for sure. 👍</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-0">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar avatar-busy">
+                <span class="avatar-initial rounded-circle bg-label-success">CM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h6 class="chat-contact-name text-truncate fw-normal m-0">Calvin Moore</h6>
+                  <small class="chat-contact-list-item-time">1 Day</small>
+                </div>
+                <small class="chat-contact-status text-truncate">If it takes long you can mail inbox user</small>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <!-- Contacts -->
+        <ul class="list-unstyled chat-contact-list mb-0 py-2" id="contact-list">
+          <li class="chat-contact-list-item chat-contact-list-item-title mt-0">
+            <h5 class="text-primary mb-0">Contacts</h5>
+          </li>
+          <li class="chat-contact-list-item contact-list-item-0 d-none">
+            <h6 class="text-body-secondary mb-0">No Contacts Found</h6>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Natalie Maxwell</h6>
+                <small class="chat-contact-status text-truncate">UI/UX Designer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Jess Cook</h6>
+                <small class="chat-contact-status text-truncate">Business Analyst</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-primary">LM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Louie Mason</h6>
+                <small class="chat-contact-status text-truncate">Resource Manager</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Krystal Norton</h6>
+                <small class="chat-contact-status text-truncate">Business Executive</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/8.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Stacy Garrison</h6>
+                <small class="chat-contact-status text-truncate">Marketing Ninja</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-success">CM</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Calvin Moore</h6>
+                <small class="chat-contact-status text-truncate">UX Engineer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/10.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Mary Giles</h6>
+                <small class="chat-contact-status text-truncate">Account Department</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/13.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Waldemar Mannering</h6>
+                <small class="chat-contact-status text-truncate">AWS Support</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="avatar d-block flex-shrink-0">
+                <span class="avatar-initial rounded-circle bg-label-danger">AJ</span>
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Amy Johnson</h6>
+                <small class="chat-contact-status text-truncate">Frontend Developer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">Felecia Rower</h6>
+                <small class="chat-contact-status text-truncate">Cloud Engineer</small>
+              </div>
+            </a>
+          </li>
+          <li class="chat-contact-list-item mb-0">
+            <a class="d-flex align-items-center">
+              <div class="flex-shrink-0 avatar">
+                <img src="~/img/avatars/11.png" alt="Avatar" class="rounded-circle" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="chat-contact-name text-truncate m-0 fw-normal">William Stephens</h6>
+                <small class="chat-contact-status text-truncate">Backend Developer</small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- /Chat contacts -->
+
+    <!-- Chat conversation -->
+    <div class="col app-chat-conversation d-flex align-items-center justify-content-center flex-column" id="app-chat-conversation">
+      <div class="bg-label-primary p-8 rounded-circle">
+        <i class="icon-base ti tabler-message-2 icon-50px"></i>
+      </div>
+      <p class="my-4">Select a contact to start a conversation.</p>
+      <button class="btn btn-primary app-chat-conversation-btn" id="app-chat-conversation-btn">Select Contact</button>
+    </div>
+    <!-- /Chat conversation -->
+
+    <!-- Chat History -->
+    <div class="col app-chat-history d-none" id="app-chat-history">
+      <div class="chat-history-wrapper">
+        <div class="chat-history-header border-bottom">
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex overflow-hidden align-items-center">
+              <i class="icon-base ti tabler-menu-2 icon-lg cursor-pointer d-lg-none d-block me-4" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-contacts"></i>
+              <div class="flex-shrink-0 avatar avatar-online">
+                <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right" />
+              </div>
+              <div class="chat-contact-info flex-grow-1 ms-4">
+                <h6 class="m-0 fw-normal">Felecia Rower</h6>
+                <small class="user-status text-body">NextJS developer</small>
+              </div>
+            </div>
+            <div class="d-flex align-items-center">
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-phone icon-22px"></i>
+              </span>
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-video icon-22px"></i>
+              </span>
+              <span class="btn btn-text-secondary cursor-pointer d-sm-inline-flex d-none me-1 btn-icon rounded-pill">
+                <i class="icon-base ti tabler-search icon-22px"></i>
+              </span>
+              <div class="dropdown">
+                <button class="btn btn-icon btn-text-secondary text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="true" id="chat-header-actions"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="chat-header-actions">
+                  <a class="dropdown-item" href="javascript:void(0);">View Contact</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Mute Notifications</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Block Contact</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Clear Chat</a>
+                  <a class="dropdown-item" href="javascript:void(0);">Report</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="chat-history-body">
+          <ul class="list-unstyled chat-history">
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">How can we help? We're here for you! 😄</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:00 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Hey John, I am looking for the best admin template.</p>
+                    <p class="mb-0">Could you please help me to find it out? 🤔</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">It should be Bootstrap 5 compatible.</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:02 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">@TempData.Peek("appName") has all the components you'll ever need in a app.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:03 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Looks clean and fresh UI. 😃</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">It's perfect for my next project.</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">How can I purchase it?</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:05 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Thanks, you can purchase it.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:06 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">I will purchase it for sure. 👍</p>
+                  </div>
+                  <div class="chat-message-text mt-2">
+                    <p class="mb-0">Thanks.</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:08 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Great, Feel free to get in touch.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px text-success me-1"></i>
+                    <small>10:10 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message">
+              <div class="d-flex overflow-hidden">
+                <div class="user-avatar flex-shrink-0 me-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+                <div class="chat-message-wrapper flex-grow-1">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Do you have design files for @TempData.Peek("appName")?</p>
+                  </div>
+                  <div class="text-body-secondary mt-1">
+                    <small>10:15 AM</small>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li class="chat-message chat-message-right">
+              <div class="d-flex overflow-hidden">
+                <div class="chat-message-wrapper flex-grow-1 w-50">
+                  <div class="chat-message-text">
+                    <p class="mb-0">Yes that's correct documentation file, Design files are included with the template.</p>
+                  </div>
+                  <div class="text-end text-body-secondary mt-1">
+                    <i class="icon-base ti tabler-checks icon-16px me-1"></i>
+                    <small>10:15 AM</small>
+                  </div>
+                </div>
+                <div class="user-avatar flex-shrink-0 ms-4">
+                  <div class="avatar avatar-sm">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <!-- Chat message form -->
+        <div class="chat-history-footer shadow-xs">
+          <form class="form-send-message d-flex justify-content-between align-items-center ">
+            <input class="form-control message-input border-0 me-4 shadow-none" placeholder="Type your message here..." />
+            <div class="message-actions d-flex align-items-center">
+              <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer">
+                <i class="speech-to-text icon-base ti tabler-microphone icon-22px text-heading"></i>
+              </span>
+              <label for="attach-doc" class="form-label mb-0">
+                <span class="btn btn-text-secondary btn-icon rounded-pill cursor-pointer mx-1">
+                  <i class="icon-base ti tabler-paperclip icon-22px text-heading"></i>
+                </span>
+                <input type="file" id="attach-doc" hidden />
+              </label>
+              <button class="btn btn-primary d-flex send-msg-btn">
+                <span class="align-middle d-md-inline-block d-none">Send</span>
+                <i class="icon-base ti tabler-send icon-16px ms-md-2 ms-0"></i>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <!-- /Chat History -->
+
+    <!-- Sidebar Right -->
+    <div class="col app-chat-sidebar-right app-sidebar overflow-hidden" id="app-chat-sidebar-right">
+      <div class="sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-6 pt-12">
+        <div class="avatar avatar-xl avatar-online chat-sidebar-avatar">
+          <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+        </div>
+        <h5 class="mt-4 mb-0">Felecia Rower</h5>
+        <span>NextJS Developer</span>
+        <i class="icon-base ti tabler-x icon-lg cursor-pointer close-sidebar d-block" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right"></i>
+      </div>
+      <div class="sidebar-body p-6 pt-0">
+        <div class="my-6">
+          <p class="text-uppercase mb-1 text-body-secondary">About</p>
+          <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content .</p>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase mb-1 text-body-secondary">Personal Information</p>
+          <ul class="list-unstyled d-grid gap-4 mb-0 ms-2 py-2 text-heading">
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-mail icon-md"></i>
+              <span class="align-middle ms-2">josephGreen@email.com</span>
+            </li>
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-phone-call icon-md"></i>
+              <span class="align-middle ms-2">+1(123) 456 - 7890</span>
+            </li>
+            <li class="d-flex align-items-center">
+              <i class="icon-base ti tabler-clock icon-md"></i>
+              <span class="align-middle ms-2">Mon - Fri 10AM - 8PM</span>
+            </li>
+          </ul>
+        </div>
+        <div class="my-6">
+          <p class="text-uppercase text-body-secondary mb-1">Options</p>
+          <ul class="list-unstyled d-grid gap-4 ms-2 py-2 text-heading">
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-bookmark icon-md"></i>
+              <span class="align-middle ms-2">Add Tag</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-star icon-md"></i>
+              <span class="align-middle ms-2">Important Contact</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-photo icon-md"></i>
+              <span class="align-middle ms-2">Shared Media</span>
+            </li>
+            <li class="cursor-pointer d-flex align-items-center">
+              <i class="icon-base ti tabler-ban icon-md"></i>
+              <span class="align-middle ms-2">Block Contact</span>
+            </li>
+          </ul>
+        </div>
+        <div class="d-flex mt-6">
+          <button class="btn btn-danger w-100" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-right">Delete Contact<i class="icon-base ti tabler-trash icon-16px ms-2"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- /Sidebar Right -->
+
+    <div class="app-overlay"></div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Apps/Email.cshtml

@@ -0,0 +1,800 @@
+@{
+  ViewData["Title"] = "Email - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/katex.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/quill/katex.js"></script>
+<script src="~/vendor/libs/quill/quill.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/notiflix/notiflix.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-email.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-email.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-email card">
+  <div class="row g-0">
+    <!-- Email Sidebar -->
+    <div class="col app-email-sidebar border-end flex-grow-0" id="app-email-sidebar">
+      <div class="btn-compost-wrapper d-grid">
+        <button class="btn btn-primary btn-compose" data-bs-toggle="modal" data-bs-target="#emailComposeSidebar" id="emailComposeSidebarLabel">Compose</button>
+      </div>
+      <!-- Email Filters -->
+      <div class="email-filters pt-4 pb-2">
+        <!-- Email Filters: Folder -->
+        <ul class="email-filter-folders list-unstyled">
+          <li class="active d-flex justify-content-between align-items-center mb-1" data-target="inbox">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-mail"></i>
+              <span class="align-middle ms-2">Inbox</span>
+            </a>
+            <div class="badge bg-label-primary rounded-pill">21</div>
+          </li>
+          <li class="d-flex mb-1" data-target="sent">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-send"></i>
+              <span class="align-middle ms-2">Sent</span>
+            </a>
+          </li>
+          <li class="d-flex justify-content-between align-items-center mb-1" data-target="draft">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-edit"></i>
+              <span class="align-middle ms-2">Draft</span>
+            </a>
+            <div class="badge bg-label-warning rounded-pill">2</div>
+          </li>
+          <li class="d-flex justify-content-between mb-1" data-target="starred">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-star"></i>
+              <span class="align-middle ms-2">Starred</span>
+            </a>
+          </li>
+          <li class="d-flex justify-content-between align-items-center mb-1" data-target="spam">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-alert-octagon"></i>
+              <span class="align-middle ms-2">Spam</span>
+            </a>
+            <div class="badge bg-label-danger rounded-pill">4</div>
+          </li>
+          <li class="d-flex align-items-center mb-1" data-target="trash">
+            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
+              <i class="icon-base ti tabler-trash"></i>
+              <span class="align-middle ms-2">Trash</span>
+            </a>
+          </li>
+        </ul>
+        <!-- Email Filters: Labels -->
+        <div class="email-filter-labels pt-4">
+          <p class="small mx-6 text-body-secondary text-uppercase">Labels</p>
+          <ul class="list-unstyled mb-2">
+            <li data-target="work">
+              <a href="javascript:void(0);">
+                <i class="badge badge-dot bg-success align-middle"></i>
+                <span class="align-middle ms-2">Personal</span>
+              </a>
+            </li>
+            <li data-target="company">
+              <a href="javascript:void(0);">
+                <i class="badge badge-dot bg-primary align-middle"></i>
+                <span class="align-middle ms-2">Company</span>
+              </a>
+            </li>
+            <li data-target="important">
+              <a href="javascript:void(0);">
+                <i class="badge badge-dot bg-warning align-middle"></i>
+                <span class="align-middle ms-2">Important</span>
+              </a>
+            </li>
+            <li data-target="private">
+              <a href="javascript:void(0);">
+                <i class="badge badge-dot bg-danger align-middle"></i>
+                <span class="align-middle ms-2">Private</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <!--/ Email Filters -->
+      </div>
+    </div>
+    <!--/ Email Sidebar -->
+
+    <!-- Emails List -->
+    <div class="col app-emails-list">
+      <div class="card shadow-none border-0 rounded-0">
+        <div class="card-body emails-list-header p-3 py-2">
+          <!-- Email List: Search -->
+          <div class="d-flex justify-content-between align-items-center px-3 mt-2">
+            <div class="d-flex align-items-center w-100">
+              <i class="icon-base ti tabler-menu-2 icon-lg cursor-pointer d-block d-lg-none me-4 mb-4" data-bs-toggle="sidebar" data-target="#app-email-sidebar" data-overlay></i>
+              <div class="mb-4 w-100">
+                <div class="input-group input-group-merge shadow-none">
+                  <span class="input-group-text border-0 ps-0 py-0" id="email-search">
+                    <i class="icon-base ti tabler-search icon-lg"></i>
+                  </span>
+                  <input type="text" class="form-control email-search-input border-0 py-0" placeholder="Search mail" aria-label="Search mail" aria-describedby="email-search" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <hr class="mx-n3 emails-list-header-hr mb-2" />
+          <!-- Email List: Actions -->
+          <div class="d-flex justify-content-between align-items-center ps-1">
+            <div class="d-flex align-items-center">
+              <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="email-select-all" />
+                <label class="form-check-label" for="email-select-all"></label>
+              </div>
+              <div class="btn btn-text-secondary btn-icon rounded-pill me-1"><i class="icon-base ti tabler-trash icon-22px email-list-delete cursor-pointer"></i></div>
+              <div class="btn btn-text-secondary btn-icon rounded-pill me-1"><i class="icon-base ti tabler-mail-opened icon-22px email-list-read cursor-pointer"></i></div>
+              <div class="dropdown me-1">
+                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMenuFolderOne" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="icon-base ti tabler-folder icon-22px"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderOne">
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-info-circle icon-sm me-1"></i>
+                    <span class="align-middle">Spam</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-file icon-sm me-1"></i>
+                    <span class="align-middle">Draft</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-trash icon-sm me-1"></i>
+                    <span class="align-middle">Trash</span>
+                  </a>
+                </div>
+              </div>
+              <div class="dropdown mx-1">
+                <button class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="true" id="dropdownLabelOne">
+                  <i class="icon-base ti tabler-tag icon-22px"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownLabelOne">
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="badge badge-dot bg-success me-1"></i>
+                    <span class="align-middle">Workshop</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="badge badge-dot bg-primary me-1"></i>
+                    <span class="align-middle">Company</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="badge badge-dot bg-warning me-1"></i>
+                    <span class="align-middle">Important</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="badge badge-dot bg-danger me-1"></i>
+                    <span class="align-middle">Private</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex align-items-center">
+              <span class="btn btn-icon btn-text-secondary rounded-pill me-1">
+                <i class="icon-base ti tabler-refresh icon-22px scaleX-n1-rtl cursor-pointer email-refresh"></i>
+              </span>
+              <div class="dropdown">
+                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="emailsActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="emailsActions">
+                  <a class="dropdown-item" href="javascript:void(0)">Mark as read</a>
+                  <a class="dropdown-item" href="javascript:void(0)">Mark as unread</a>
+                  <a class="dropdown-item" href="javascript:void(0)">Delete</a>
+                  <a class="dropdown-item" href="javascript:void(0)">Archive</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr class="container-m-nx m-0" />
+        <!-- Email List: Items -->
+        <div class="email-list pt-0">
+          <ul class="list-unstyled m-0">
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-1" />
+                  <label class="form-check-label" for="email-1"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/1.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 text-heading">Chandler Bing</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Focused impactful open issues from the project of GitHub</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
+                  <small class="email-list-item-time text-body-secondary">08:40 AM</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-sent="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-2" />
+                  <label class="form-check-label" for="email-2"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/2.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Ross Geller</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Dessert soufflé tootsie roll soufflé carrot cake halvah jelly.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="important"></span>
+                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
+                  <small class="email-list-item-time text-body-secondary">10:12 AM</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-3" />
+                  <label class="form-check-label" for="email-3"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
+                  <span class="avatar-initial rounded-circle bg-label-success">BS</span>
+                </div>
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Barney Stinson</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Soufflé apple pie caramels soufflé tiramisu bear claw.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-attachment icon-base ti tabler-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
+                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="company"></span>
+                  <small class="email-list-item-time text-body-secondary">12:44 AM</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item d-flex align-items-center email-marked-read" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-4" />
+                  <label class="form-check-label" for="email-4"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/3.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Pheobe Buffay</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Tart croissant jujubes gummies macaroon Icing sweet.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-success d-none d-md-inline-block me-2" data-label="work"></span>
+                  <small class="email-list-item-time text-body-secondary">Yesterday</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-5" />
+                  <label class="form-check-label" for="email-5"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/4.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Ted Mosby</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love Pudding cookie chocolate sweet tiramisu jujubes I love danish.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="company"></span>
+                  <small class="email-list-item-time text-body-secondary">Yesterday</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item d-flex align-items-center email-marked-read" data-trash="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-6" />
+                  <label class="form-check-label" for="email-6"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
+                  <span class="avatar-initial rounded-circle bg-label-info">Sk</span>
+                </div>
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Stacy Cooper</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love danish. Cupcake I love carrot cake sugar plum I love.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="work"></span>
+                  <small class="email-list-item-time text-body-secondary">5 May</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-7" />
+                  <label class="form-check-label" for="email-7"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/5.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Rachel Green</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream bonbon lollipop.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-warning d-none d-md-inline-block me-2" data-label="company"></span>
+                  <small class="email-list-item-time text-body-secondary">15 May</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-8" />
+                  <label class="form-check-label" for="email-8"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/6.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Grace Shelby</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Icing gummi bears ice cream croissant dessert wafer.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-attachment icon-base ti tabler-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
+                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
+                  <small class="email-list-item-time text-body-secondary">20 Apr</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-9" />
+                  <label class="form-check-label" for="email-9"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
+                  <span class="avatar-initial rounded-circle bg-label-danger">JF</span>
+                </div>
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Jacob Frye</span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream Sweet.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="important"></span>
+                  <small class="email-list-item-time text-body-secondary">25 Mar</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li class="email-list-item email-marked-read d-flex align-items-center" data-trash="true" data-bs-toggle="sidebar" data-target="#app-email-view">
+              <div class="d-flex align-items-center w-100">
+                <div class="form-check mb-0 ms-2">
+                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-10" />
+                  <label class="form-check-label" for="email-10"></label>
+                </div>
+                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
+                <img src="~/img/avatars/9.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
+                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
+                  <span class="email-list-item-username me-2 h6">Alistair Crowley </span>
+                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love danish. Cupcake I love carrot cake sugar plum I love.</span>
+                </div>
+                <div class="email-list-item-meta ms-auto d-flex align-items-center">
+                  <span class="email-list-item-label badge badge-dot bg-success d-none d-md-inline-block me-2" data-label="company"></span>
+                  <small class="email-list-item-time text-body-secondary">25 Feb</small>
+                  <ul class="list-inline email-list-item-actions">
+                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
+                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
+                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <ul class="list-unstyled m-0">
+            <li class="email-list-empty text-center d-none">No items found.</li>
+          </ul>
+        </div>
+      </div>
+      <div class="app-overlay"></div>
+    </div>
+    <!-- /Emails List -->
+
+    <!-- Email View -->
+    <div class="col app-email-view flex-grow-0 bg-lighter" id="app-email-view">
+      <div class="card shadow-none border-0 rounded-0 app-email-view-header p-5 pt-md-4 py-2">
+        <!-- Email View : Title  bar-->
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex align-items-center overflow-hidden">
+            <span class="ms-sm-2 me-4"><i class="icon-base ti tabler-chevron-left icon-md cursor-pointer scaleX-n1-rtl" data-bs-toggle="sidebar" data-target="#app-email-view"></i></span>
+            <h6 class="text-truncate mb-0 me-2 fw-normal">Focused impactful open issues</h6>
+            <span class="badge bg-label-warning rounded-pill">Important</span>
+          </div>
+          <!-- Email View : Action bar-->
+          <div class="d-flex align-items-center">
+            <span class="btn btn-icon p-0 me-2 text-body-secondary">
+              <i class="icon-base ti tabler-chevron-left icon-22px scaleX-n1-rtl"></i>
+            </span>
+            <span class="btn btn-icon p-0">
+              <i class="icon-base ti tabler-chevron-right icon-22px scaleX-n1-rtl"></i>
+            </span>
+          </div>
+        </div>
+        <hr class="app-email-view-hr mx-n5 mb-2" />
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex align-items-center">
+            <span class="btn btn-icon btn-text-secondary rounded-pill me-1"><i class="icon-base ti tabler-trash icon-22px cursor-pointer"></i></span>
+            <span class="btn btn-icon btn-text-secondary rounded-pill me-1"><i class="icon-base ti tabler-mail icon-22px cursor-pointer" data-bs-toggle="sidebar" data-target="#app-email-view"></i></span>
+            <div class="dropdown">
+              <button class="btn btn-icon btn-text-secondary rounded-pill p-0 me-1" type="button" id="dropdownMenuFolderTwo" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="icon-base ti tabler-folder icon-22px"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderTwo">
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-alert-octagon me-1"></i>
+                  <span class="align-middle">Spam</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-edit me-1"></i>
+                  <span class="align-middle">Draft</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-trash me-1"></i>
+                  <span class="align-middle">Trash</span>
+                </a>
+              </div>
+            </div>
+            <div class="dropdown">
+              <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownLabelTwo" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="icon-base ti tabler-tag icon-22px"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownLabelTwo">
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="badge badge-dot bg-success me-1"></i>
+                  <span class="align-middle">Workshop</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="badge badge-dot bg-primary me-1"></i>
+                  <span class="align-middle">Company</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="badge badge-dot bg-info me-1"></i>
+                  <span class="align-middle">Important</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="d-flex align-items-center">
+            <span class="btn btn-icon btn-text-secondary rounded-pill p-0">
+              <i class="icon-base ti tabler-star icon-22px"></i>
+            </span>
+            <div class="dropdown ms-1">
+              <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMoreOptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMoreOptions">
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-mail me-1"></i>
+                  <span class="align-middle">Mark as unread</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-mail-opened me-1"></i>
+                  <span class="align-middle">Mark as read</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-star icon-sm me-1"></i>
+                  <span class="align-middle">Add star</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-calendar me-1"></i>
+                  <span class="align-middle">Create Event</span>
+                </a>
+                <a class="dropdown-item" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-volume-off me-1"></i>
+                  <span class="align-middle">Mute</span>
+                </a>
+                <a class="dropdown-item d-sm-none d-block" href="javascript:void(0)">
+                  <i class="icon-base ti tabler-printer me-1"></i>
+                  <span class="align-middle">Print</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr class="m-0" />
+      <!-- Email View : Content-->
+      <div class="app-email-view-content py-4">
+        <p class="email-earlier-msgs text-center cursor-pointer mb-12">1 Earlier Message</p>
+        <!-- Email View : Previous mails-->
+        <div class="card email-card-prev mx-sm-6 mx-3">
+          <div class="card-header d-flex justify-content-between align-items-center flex-wrap border-bottom">
+            <div class="d-flex align-items-center mb-sm-0 mb-3">
+              <img src="~/img/avatars/2.png" alt="user-avatar" class="flex-shrink-0 rounded-circle me-4" height="38" width="38" />
+              <div class="flex-grow-1 ms-1">
+                <h6 class="m-0 fw-normal">Ross Geller</h6>
+                <small class="text-body">rossGeller&#64;email.com</small>
+              </div>
+            </div>
+            <div class="d-flex align-items-center">
+              <p class="mb-0 me-4 text-body-secondary">June 20th 2020, 08:30 AM</p>
+              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-paperclip icon-22px cursor-pointer"></i></span>
+              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="email-list-item-bookmark icon-base ti tabler-star icon-22px cursor-pointer"></i></span>
+              <div class="dropdown">
+                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownEmailOne" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEmailOne">
+                  <a class="dropdown-item scroll-to-reply" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-corner-up-left me-1"></i>
+                    <span class="align-middle">Reply</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-corner-up-right me-1"></i>
+                    <span class="align-middle">Forward</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-alert-octagon me-1"></i>
+                    <span class="align-middle">Report</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-body pt-5">
+            <p class="fw-medium">Greetings!</p>
+            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',making it look like readable English.</p>
+            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
+            <p class="mb-0">Sincerely yours,</p>
+            <p class="fw-medium mb-0">Envato Design Team</p>
+            <hr />
+            <p class="text-body-secondary mb-2">Attachments</p>
+            <div class="cursor-pointer">
+              <i class="icon-base ti tabler-file"></i>
+              <span class="align-middle ms-1">report.xlsx</span>
+            </div>
+          </div>
+        </div>
+        <!-- Email View : Last mail-->
+        <div class="card email-card-last mx-sm-6 mx-3 mt-4">
+          <div class="card-header d-flex justify-content-between align-items-center flex-wrap border-bottom">
+            <div class="d-flex align-items-center mb-sm-0 mb-3">
+              <img src="~/img/avatars/1.png" alt="user-avatar" class="flex-shrink-0 rounded-circle me-4" height="38" width="38" />
+              <div class="flex-grow-1 ms-1">
+                <h6 class="m-0 fw-normal">Chandler Bing</h6>
+                <small class="text-body">iAmAhoot&#64;email.com</small>
+              </div>
+            </div>
+            <div class="d-flex align-items-center">
+              <p class="mb-0 me-4 text-body-secondary">June 20th 2020, 08:10 AM</p>
+              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-paperclip icon-22px cursor-pointer"></i></span>
+              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px cursor-pointer"></i></span>
+              <div class="dropdown">
+                <button class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" id="dropdownEmailTwo" data-bs-toggle="dropdown" aria-expanded="true">
+                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEmailTwo">
+                  <a class="dropdown-item scroll-to-reply" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-corner-up-left me-1"></i>
+                    <span class="align-middle">Reply</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-corner-up-right me-1"></i>
+                    <span class="align-middle">Forward</span>
+                  </a>
+                  <a class="dropdown-item" href="javascript:void(0)">
+                    <i class="icon-base ti tabler-alert-octagon me-1"></i>
+                    <span class="align-middle">Report</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-body pt-5">
+            <p class="fw-medium">Greetings!</p>
+            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',making it look like readable English.</p>
+            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
+            <p class="mb-0">Sincerely yours,</p>
+            <p class="fw-medium mb-0">Envato Design Team</p>
+            <hr />
+            <p class="text-body-secondary mb-2">Attachments</p>
+            <div class="cursor-pointer">
+              <i class="icon-base ti tabler-file"></i>
+              <span class="align-middle ms-1">report.xlsx</span>
+            </div>
+          </div>
+        </div>
+        <!-- Email View : Reply mail-->
+        <div class="email-reply card mt-4 mx-sm-6 mx-3 mb-4">
+          <h6 class="card-header border-0 fw-normal pb-4">Reply to Ross Geller</h6>
+          <div class="card-body pt-0 ps-3">
+            <div class="d-flex justify-content-start">
+              <div class="email-reply-toolbar border-0 w-100 ps-0 pb-4">
+                <span class="ql-formats me-0">
+                  <button class="ql-bold"></button>
+                  <button class="ql-italic"></button>
+                  <button class="ql-underline"></button>
+                  <button class="ql-list" value="ordered"></button>
+                  <button class="ql-list" value="bullet"></button>
+                  <button class="ql-link"></button>
+                  <button class="ql-image"></button>
+                </span>
+              </div>
+            </div>
+            <div class="email-reply-editor"></div>
+            <div class="d-flex justify-content-end align-items-center mt-4">
+              <div class="cursor-pointer btn btn-text-secondary text-secondary me-4 px-3">
+                <i class="icon-base ti tabler-paperclip icon-xs text-heading me-2"></i>
+                <span class="align-middle">Attachments</span>
+              </div>
+              <button class="btn btn-primary">
+                <span class="align-middle">Send</span>
+                <i class="icon-base ti tabler-send icon-xs ms-2 scaleX-n1-rtl"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Email View -->
+  </div>
+
+  <!-- Compose Email -->
+  <div class="app-email-compose modal" id="emailComposeSidebar" tabindex="-1" aria-labelledby="emailComposeSidebarLabel" aria-hidden="true">
+    <div class="modal-dialog m-0 me-md-6 mb-6 modal-lg">
+      <div class="modal-content p-0">
+        <div class="modal-header py-3 justify-content-between">
+          <h5 class="modal-title text-body fs-5">Compose Mail</h5>
+          <div class="d-flex align-items-center gap-2">
+            <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-minus icon-20px"></i></button>
+            <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill" data-bs-dismiss="modal" aria-label="Close"><i class="icon-base ti tabler-x icon-20px"></i></button>
+          </div>
+        </div>
+        <div class="modal-body flex-grow-1 pb-sm-0 p-5 py-2">
+          <form class="email-compose-form">
+            <div class="email-compose-to d-flex justify-content-between align-items-center">
+              <label class="fw-medium mb-1 text-body-secondary" for="emailContacts">To:</label>
+              <div class="select2-primary border-0 shadow-none flex-grow-1 mx-2">
+                <select class="select2 select-email-contacts form-select" id="emailContacts" name="emailContacts" multiple>
+                  <option data-avatar="1.png" value="Jane Foster">Jane Foster</option>
+                  <option data-avatar="3.png" value="Donna Frank">Donna Frank</option>
+                  <option data-avatar="5.png" value="Gabrielle Robertson">Gabrielle Robertson</option>
+                  <option data-avatar="7.png" value="Lori Spears">Lori Spears</option>
+                  <option data-avatar="9.png" value="Sandy Vega">Sandy Vega</option>
+                  <option data-avatar="11.png" value="Cheryl May">Cheryl May</option>
+                </select>
+              </div>
+              <div class="email-compose-toggle-wrapper">
+                <a class="email-compose-toggle-cc text-body" href="javascript:void(0);">Cc |</a>
+                <a class="email-compose-toggle-bcc text-body" href="javascript:void(0);">Bcc</a>
+              </div>
+            </div>
+
+            <div class="email-compose-cc d-none">
+              <hr class="mx-n5 my-0" />
+              <div class="d-flex align-items-center">
+                <label for="email-cc" class="fw-medium text-body-secondary">Cc:</label>
+                <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-cc" placeholder="someone&#64;email.com" />
+              </div>
+            </div>
+            <div class="email-compose-bcc d-none">
+              <hr class="mx-n5 my-0" />
+              <div class="d-flex align-items-center">
+                <label for="email-bcc" class="fw-medium text-body-secondary">Bcc:</label>
+                <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-bcc" placeholder="someone&#64;email.com" />
+              </div>
+            </div>
+            <hr class="mx-n5 my-0" />
+            <div class="email-compose-subject d-flex align-items-center">
+              <label for="email-subject" class="fw-medium text-body-secondary">Subject:</label>
+              <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-subject" />
+            </div>
+            <div class="email-compose-message">
+              <hr class="mx-n5 my-0" />
+              <div class="d-flex justify-content-end mx-n1">
+                <div class="email-editor-toolbar border-0 w-100 px-0">
+                  <span class="ql-formats me-0">
+                    <button class="ql-bold"></button>
+                    <button class="ql-italic"></button>
+                    <button class="ql-underline"></button>
+                    <button class="ql-list" value="ordered"></button>
+                    <button class="ql-list" value="bullet"></button>
+                    <button class="ql-link"></button>
+                    <button class="ql-image"></button>
+                  </span>
+                </div>
+              </div>
+              <hr class="mx-n5 my-0" />
+              <div class="email-editor border-0 mx-n5"></div>
+            </div>
+            <hr class="mx-n5 mt-0 mb-2" />
+            <div class="email-compose-actions d-flex justify-content-between align-items-center my-4">
+              <div class="d-flex align-items-center">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-primary dropdown-toggle email-send-btn" data-bs-toggle="dropdown" aria-expanded="false">Send <i class="icon-base ti tabler-send icon-xs scaleX-n1-rtl ms-2"></i></button>
+                  <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="javascript:void(0);">Schedule send</a></li>
+                    <li><a class="dropdown-item" href="javascript:void(0);">Save draft</a></li>
+                  </ul>
+                </div>
+                <label for="attach-file" class="btn btn-sm btn-icon btn-text-secondary rounded-pill ms-4"><i class="icon-base ti tabler-paperclip icon-20px cursor-pointer"></i></label>
+                <input type="file" name="file-input" class="d-none" id="attach-file" />
+              </div>
+              <div class="d-flex align-items-center gap-2">
+                <div class="dropdown">
+                  <button class="btn btn-sm btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMoreActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="icon-base ti tabler-dots-vertical icon-20px"></i>
+                  </button>
+                  <ul class="dropdown-menu" aria-labelledby="dropdownMoreActions">
+                    <li><button type="button" class="dropdown-item">Add Label</button></li>
+                    <li><button type="button" class="dropdown-item">Plain text mode</button></li>
+                    <li>
+                      <hr class="dropdown-divider" />
+                    </li>
+                    <li><button type="button" class="dropdown-item">Print</button></li>
+                    <li><button type="button" class="dropdown-item">Check Spelling</button></li>
+                  </ul>
+                </div>
+                <button type="reset" class="btn btn-sm btn-icon btn-text-secondary rounded-pill" data-bs-dismiss="modal" aria-label="Close"><i class="icon-base ti tabler-trash icon-20px"></i></button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Compose Email -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Apps/Kanban.cshtml

@@ -0,0 +1,248 @@
+@{
+  ViewData["Title"] = "kanban - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/jkanban/jkanban.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/flatpickr/flatpickr.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/katex.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/flatpickr/flatpickr.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/jkanban/jkanban.js"></script>
+<script src="~/vendor/libs/quill/katex.js"></script>
+<script src="~/vendor/libs/quill/quill.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-kanban.css" />
+}
+
+@section PageScripts {
+<script src="~/js/app-kanban.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-kanban">
+  <!-- Add new board -->
+  <div class="row">
+    <div class="col-12">
+      <form class="kanban-add-new-board">
+        <label class="kanban-add-board-btn" for="kanban-add-board-input">
+          <i class="icon-base ti tabler-plus"></i>
+          <span class="align-middle">Add new</span>
+        </label>
+        <input type="text" class="form-control w-px-250 kanban-add-board-input mb-4 d-none" placeholder="Add Board Title" id="kanban-add-board-input" required />
+        <div class="mb-4 kanban-add-board-input d-none">
+          <button class="btn btn-primary btn-sm me-4">Add</button>
+          <button type="button" class="btn btn-label-secondary btn-sm kanban-add-board-cancel-btn">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Kanban Wrapper -->
+  <div class="kanban-wrapper"></div>
+
+  <!-- Edit Task/Task & Activities -->
+  <div class="offcanvas offcanvas-end kanban-update-item-sidebar">
+    <div class="offcanvas-header border-bottom">
+      <h5 class="offcanvas-title">Edit Task</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body pt-0">
+      <div class="nav-align-top">
+        <ul class="nav nav-tabs mb-5 rounded-0">
+          <li class="nav-item">
+            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-update">
+              <i class="icon-base ti tabler-edit icon-18px me-1_5"></i>
+              <span class="align-middle">Edit</span>
+            </button>
+          </li>
+          <li class="nav-item">
+            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-activity">
+              <i class="icon-base ti tabler-chart-pie-2 icon-18px me-1_5"></i>
+              <span class="align-middle">Activity</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="tab-content p-0">
+        <!-- Update item/tasks -->
+        <div class="tab-pane fade show active" id="tab-update" role="tabpanel">
+          <form>
+            <div class="mb-5">
+              <label class="form-label" for="title">Title</label>
+              <input type="text" id="title" class="form-control" placeholder="Enter Title" />
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="due-date">Due Date</label>
+              <input type="text" id="due-date" class="form-control" placeholder="Enter Due Date" />
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="label"> Label</label>
+              <select class="select2 select2-label form-select" id="label">
+                <option data-color="bg-label-success" value="UX">UX</option>
+                <option data-color="bg-label-warning" value="Images">Images</option>
+                <option data-color="bg-label-info" value="Info">Info</option>
+                <option data-color="bg-label-danger" value="Code Review">Code Review</option>
+                <option data-color="bg-label-secondary" value="App">App</option>
+                <option data-color="bg-label-primary" value="Charts & Maps">Charts & Maps</option>
+              </select>
+            </div>
+            <div class="mb-5">
+              <label class="form-label">Assigned</label>
+              <div class="assigned d-flex flex-wrap"></div>
+            </div>
+            <div class="mb-5">
+              <label class="form-label" for="attachments">Attachments</label>
+              <div>
+                <input type="file" class="form-control" id="attachments" />
+              </div>
+            </div>
+            <div class="mb-5">
+              <label class="form-label">Comment</label>
+              <div class="comment-editor border-bottom-0"></div>
+              <div class="d-flex justify-content-end">
+                <div class="comment-toolbar">
+                  <span class="ql-formats me-0">
+                    <button class="ql-bold"></button>
+                    <button class="ql-italic"></button>
+                    <button class="ql-underline"></button>
+                    <button class="ql-link"></button>
+                    <button class="ql-image"></button>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class="d-flex flex-wrap">
+                <button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Update</button>
+                <button type="button" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Delete</button>
+              </div>
+            </div>
+          </form>
+        </div>
+        <!-- Activities -->
+        <div class="tab-pane fade text-heading" id="tab-activity" role="tabpanel">
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-success rounded-circle">HJ</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Jordan</span> Left the board.</p>
+              <small class="text-body-secondary">Today 11:00 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Dianna</span> mentioned <span class="text-primary">&#64;bruce</span> in a comment.</p>
+              <small class="text-body-secondary">Today 10:20 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Martian</span> added moved Charts & Maps task to the done board.</p>
+              <small class="text-body-secondary">Today 10:00 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Barry</span> Commented on App review task.</p>
+              <small class="text-body-secondary">Today 8:32 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-dark rounded-circle">BW</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Bruce</span> was assigned task of code review.</p>
+              <small class="text-body-secondary">Today 8:30 PM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-danger rounded-circle">CK</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0">
+                <span>Clark</span> assigned task UX Research to <span class="text-primary">&#64;martian</span>
+              </p>
+              <small class="text-body-secondary">Today 8:00 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Ray</span> Added moved <span>Forms & Tables</span> task from in progress to done.</p>
+              <small class="text-body-secondary">Today 7:45 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Barry</span> Complete all the tasks assigned to him.</p>
+              <small class="text-body-secondary">Today 7:17 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-success rounded-circle">HJ</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Jordan</span> added task to update new images.</p>
+              <small class="text-body-secondary">Today 7:00 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <img src="~/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Dianna</span> moved task <span>FAQ UX</span> from in progress to done board.</p>
+              <small class="text-body-secondary">Today 7:00 AM</small>
+            </div>
+          </div>
+          <div class="media mb-4 d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-danger rounded-circle">CK</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Clark</span> added new board with name <span>Done</span>.</p>
+              <small class="text-body-secondary">Yesterday 3:00 PM</small>
+            </div>
+          </div>
+          <div class="media d-flex align-items-center">
+            <div class="avatar me-3 flex-shrink-0">
+              <span class="avatar-initial bg-label-dark rounded-circle">BW</span>
+            </div>
+            <div class="media-body">
+              <p class="mb-0"><span>Bruce</span> added new task in progress board.</p>
+              <small class="text-body-secondary">Yesterday 12:00 PM</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/ForgotPasswordBasic.cshtml

@@ -0,0 +1,58 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Forgot Password Basic - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css">
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Forgot Password -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="/" class="app-brand-link">
+              <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+              <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Forgot Password? 🔒</h4>
+          <p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
+          <form id="formAuthentication" class="mb-6" action="~/Auth/ResetPasswordBasic" method="POST">
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email</label>
+              <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
+            </div>
+            <button class="btn btn-primary d-grid w-100">Send Reset Link</button>
+          </form>
+          <div class="text-center">
+            <a href="~/Auth/LoginBasic" class="d-flex justify-content-center">
+              <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+              Back to login
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- /Forgot Password -->
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/ForgotPasswordCover.cshtml

@@ -0,0 +1,63 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Forgot Password Cover - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-forgot-password-illustration-light.png" alt="auth-forgot-password-cover" class="my-5 auth-illustration d-lg-block d-none" data-app-light-img="illustrations/auth-forgot-password-illustration-light.png" data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-forgot-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Forgot Password -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Forgot Password? 🔒</h4>
+        <p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
+        <form id="formAuthentication" class="mb-6" action="~/Auth/ResetPasswordCover" method="POST">
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email</label>
+            <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
+          </div>
+          <button class="btn btn-primary d-grid w-100">Send Reset Link</button>
+        </form>
+        <div class="text-center">
+          <a href="~/Auth/LoginCover" class="d-flex justify-content-center">
+            <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+            Back to login
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Forgot Password -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/LoginBasic.cshtml

@@ -0,0 +1,102 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Login Basic - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Login -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="/" class="app-brand-link">
+              <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+              <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Welcome to @TempData.Peek("appName")! 👋</h4>
+          <p class="mb-6">Please sign-in to your account and start the adventure</p>
+
+          <form id="formAuthentication" class="mb-4" action="/" method="POST">
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email or Username</label>
+              <input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="my-8">
+              <div class="d-flex justify-content-between">
+                <div class="form-check mb-0 ms-2">
+                  <input class="form-check-input" type="checkbox" id="remember-me" />
+                  <label class="form-check-label" for="remember-me"> Remember Me </label>
+                </div>
+                <a href="/Auth/ForgotPasswordBasic">
+                  <p class="mb-0">Forgot Password?</p>
+                </a>
+              </div>
+            </div>
+            <div class="mb-6">
+              <button class="btn btn-primary d-grid w-100" type="submit">Login</button>
+            </div>
+          </form>
+
+          <p class="text-center">
+            <span>New on our platform?</span>
+            <a href="/Auth/RegisterBasic">
+              <span>Create an account</span>
+            </a>
+          </p>
+
+          <div class="divider my-6">
+            <div class="divider-text">or</div>
+          </div>
+
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+              <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+              <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+              <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+              <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- /Login -->
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/LoginCover.cshtml

@@ -0,0 +1,105 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Login Cover - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-login-illustration-light.png" alt="auth-login-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-login-illustration-light.png" data-app-dark-img="illustrations/auth-login-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-login-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Login -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Welcome to @TempData.Peek("appName")! 👋</h4>
+        <p class="mb-6">Please sign-in to your account and start the adventure</p>
+
+        <form id="formAuthentication" class="mb-6" action="/" method="POST">
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email or Username</label>
+            <input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="my-8">
+            <div class="d-flex justify-content-between">
+              <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="remember-me" />
+                <label class="form-check-label" for="remember-me"> Remember Me </label>
+              </div>
+              <a href="/Auth/ForgotPasswordCover">
+                <p class="mb-0">Forgot Password?</p>
+              </a>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100">Sign in</button>
+        </form>
+
+        <p class="text-center">
+          <span>New on our platform?</span>
+          <a href="/Auth/RegisterCover">
+            <span>Create an account</span>
+          </a>
+        </p>
+
+        <div class="divider my-6">
+          <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Login -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/RegisterBasic.cshtml

@@ -0,0 +1,102 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Register Basic - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Register Card -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="/" class="app-brand-link">
+              <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+              <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Adventure starts here 🚀</h4>
+          <p class="mb-6">Make your app management easy and fun!</p>
+
+          <form id="formAuthentication" class="mb-6" action="/" method="POST">
+            <div class="mb-6 form-control-validation">
+              <label for="username" class="form-label">Username</label>
+              <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
+            </div>
+            <div class="mb-6 form-control-validation">
+              <label for="email" class="form-label">Email</label>
+              <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="my-8 form-control-validation">
+              <div class="form-check mb-0 ms-2">
+                <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
+                <label class="form-check-label" for="terms-conditions">
+                  I agree to
+                  <a href="javascript:void(0);">privacy policy & terms</a>
+                </label>
+              </div>
+            </div>
+            <button class="btn btn-primary d-grid w-100">Sign up</button>
+          </form>
+
+          <p class="text-center">
+            <span>Already have an account?</span>
+            <a href="/Auth/LoginBasic">
+              <span>Sign in instead</span>
+            </a>
+          </p>
+
+          <div class="divider my-6">
+            <div class="divider-text">or</div>
+          </div>
+
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+              <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+              <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+              <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+            </a>
+
+            <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+              <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      <!-- Register Card -->
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/RegisterCover.cshtml

@@ -0,0 +1,107 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Register Cover - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-register-illustration-light.png" alt="auth-register-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-register-illustration-light.png" data-app-dark-img="illustrations/auth-register-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-register-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Register -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Adventure starts here 🚀</h4>
+        <p class="mb-6">Make your app management easy and fun!</p>
+
+        <form id="formAuthentication" class="mb-6" action="/" method="POST">
+          <div class="mb-6 form-control-validation">
+            <label for="username" class="form-label">Username</label>
+            <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
+          </div>
+          <div class="mb-6 form-control-validation">
+            <label for="email" class="form-label">Email</label>
+            <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="mb-6 mt-8">
+            <div class="form-check mb-8 ms-2 form-control-validation">
+              <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
+              <label class="form-check-label" for="terms-conditions">
+                I agree to
+                <a href="javascript:void(0);">privacy policy & terms</a>
+              </label>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100">Sign up</button>
+        </form>
+
+        <p class="text-center">
+          <span>Already have an account?</span>
+          <a href="/Auth/LoginCover">
+            <span>Sign in instead</span>
+          </a>
+        </p>
+
+        <div class="divider my-6">
+          <div class="divider-text">or</div>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
+            <i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
+            <i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
+            <i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
+          </a>
+
+          <a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
+            <i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- /Register -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/RegisterMultiSteps.cshtml

@@ -0,0 +1,342 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Multi-Steps Register - Pages";
+}
+
+@section VendorStyles {
+<!-- Vendor -->
+<link rel="stylesheet" href="~/vendor/libs/bs-stepper/bs-stepper.css" />
+<link rel="stylesheet" href="~/vendor/libs/bootstrap-select/bootstrap-select.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/bs-stepper/bs-stepper.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth-multisteps.js"></script>
+}
+@* ************** Content ************** *@
+
+<div class="authentication-wrapper authentication-cover authentication-bg">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row">
+    <!-- Left Text -->
+    <div class="d-none d-lg-flex col-lg-4 align-items-center justify-content-center p-5 position-relative auth-multisteps-bg-height">
+      <img src="~/img/illustrations/auth-register-multisteps-illustration.png" alt="auth-register-multisteps" class="img-fluid" width="280" />
+      <img src="~/img/illustrations/auth-register-multisteps-shape-light.png" alt="auth-register-multisteps" class="platform-bg" data-app-light-img="illustrations/auth-register-multisteps-shape-light.png" data-app-dark-img="illustrations/auth-register-multisteps-shape-dark.png" />
+    </div>
+    <!-- /Left Text -->
+
+    <!--  Multi Steps Registration -->
+    <div class="d-flex col-lg-8 align-items-center justify-content-center authentication-bg p-5">
+      <div class="w-px-700">
+        <div id="multiStepsValidation" class="bs-stepper border-none shadow-none mt-5">
+          <div class="bs-stepper-header border-none pt-12 px-0">
+            <div class="step" data-target="#accountDetailsValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-file-analytics icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Account</span>
+                  <span class="bs-stepper-subtitle">Account Details</span>
+                </span>
+              </button>
+            </div>
+            <div class="line">
+              <i class="icon-base ti tabler-chevron-right"></i>
+            </div>
+            <div class="step" data-target="#personalInfoValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-user icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Personal</span>
+                  <span class="bs-stepper-subtitle">Enter Information</span>
+                </span>
+              </button>
+            </div>
+            <div class="line">
+              <i class="icon-base ti tabler-chevron-right"></i>
+            </div>
+            <div class="step" data-target="#billingLinksValidation">
+              <button type="button" class="step-trigger">
+                <span class="bs-stepper-circle"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
+                <span class="bs-stepper-label">
+                  <span class="bs-stepper-title">Billing</span>
+                  <span class="bs-stepper-subtitle">Payment Details</span>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div class="bs-stepper-content px-0">
+            <form id="multiStepsForm" onSubmit="return false">
+              <!-- Account Details -->
+              <div id="accountDetailsValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Account Information</h4>
+                  <p class="mb-0">Enter Your Account Details</p>
+                </div>
+                <div class="row g-6">
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsUsername">Username</label>
+                    <input type="text" name="multiStepsUsername" id="multiStepsUsername" class="form-control" placeholder="johndoe" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsEmail">Email</label>
+                    <input type="email" name="multiStepsEmail" id="multiStepsEmail" class="form-control" placeholder="john.doe&#64;email.com" aria-label="john.doe" />
+                  </div>
+                  <div class="col-sm-6 form-password-toggle form-control-validation">
+                    <label class="form-label" for="multiStepsPass">Password</label>
+                    <div class="input-group input-group-merge">
+                      <input type="password" id="multiStepsPass" name="multiStepsPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsPass2" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsPass2"><i class="icon-base ti tabler-eye-off"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-sm-6 form-password-toggle form-control-validation">
+                    <label class="form-label" for="multiStepsConfirmPass">Confirm Password</label>
+                    <div class="input-group input-group-merge">
+                      <input type="password" id="multiStepsConfirmPass" name="multiStepsConfirmPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsConfirmPass2" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsConfirmPass2"><i class="icon-base ti tabler-eye-off"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label" for="multiStepsURL">Profile Link</label>
+                    <input type="text" name="multiStepsURL" id="multiStepsURL" class="form-control" placeholder="johndoe/profile" aria-label="johndoe" />
+                  </div>
+                  <div class="col-12 d-flex justify-content-between">
+                    <button class="btn btn-label-secondary btn-prev" disabled>
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
+                  </div>
+                </div>
+              </div>
+              <!-- Personal Info -->
+              <div id="personalInfoValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Personal Information</h4>
+                  <p class="mb-0">Enter Your Personal Information</p>
+                </div>
+                <div class="row g-6">
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsFirstName">First Name</label>
+                    <input type="text" id="multiStepsFirstName" name="multiStepsFirstName" class="form-control" placeholder="John" />
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsLastName">Last Name</label>
+                    <input type="text" id="multiStepsLastName" name="multiStepsLastName" class="form-control" placeholder="Doe" />
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsMobile">Mobile</label>
+                    <div class="input-group">
+                      <span class="input-group-text">US (+1)</span>
+                      <input type="text" id="multiStepsMobile" name="multiStepsMobile" class="form-control multi-steps-mobile" placeholder="202 555 0111" />
+                    </div>
+                  </div>
+                  <div class="col-sm-6">
+                    <label class="form-label" for="multiStepsPincode">Pincode</label>
+                    <input type="text" id="multiStepsPincode" name="multiStepsPincode" class="form-control multi-steps-pincode" placeholder="Postal Code" maxlength="6" />
+                  </div>
+                  <div class="col-md-12 form-control-validation">
+                    <label class="form-label" for="multiStepsAddress">Address</label>
+                    <input type="text" id="multiStepsAddress" name="multiStepsAddress" class="form-control" placeholder="Address" />
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label" for="multiStepsArea">Landmark</label>
+                    <input type="text" id="multiStepsArea" name="multiStepsArea" class="form-control" placeholder="Area/Landmark" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsCity">City</label>
+                    <input type="text" id="multiStepsCity" class="form-control" placeholder="Jackson" />
+                  </div>
+                  <div class="col-sm-6 form-control-validation">
+                    <label class="form-label" for="multiStepsState">State</label>
+                    <select id="multiStepsState" class="select2 form-select" data-allow-clear="true">
+                      <option value="">Select</option>
+                      <option value="AL">Alabama</option>
+                      <option value="AK">Alaska</option>
+                      <option value="AZ">Arizona</option>
+                      <option value="AR">Arkansas</option>
+                      <option value="CA">California</option>
+                      <option value="CO">Colorado</option>
+                      <option value="CT">Connecticut</option>
+                      <option value="DE">Delaware</option>
+                      <option value="DC">District Of Columbia</option>
+                      <option value="FL">Florida</option>
+                      <option value="GA">Georgia</option>
+                      <option value="HI">Hawaii</option>
+                      <option value="ID">Idaho</option>
+                      <option value="IL">Illinois</option>
+                      <option value="IN">Indiana</option>
+                      <option value="IA">Iowa</option>
+                      <option value="KS">Kansas</option>
+                      <option value="KY">Kentucky</option>
+                      <option value="LA">Louisiana</option>
+                      <option value="ME">Maine</option>
+                      <option value="MD">Maryland</option>
+                      <option value="MA">Massachusetts</option>
+                      <option value="MI">Michigan</option>
+                      <option value="MN">Minnesota</option>
+                      <option value="MS">Mississippi</option>
+                      <option value="MO">Missouri</option>
+                      <option value="MT">Montana</option>
+                      <option value="NE">Nebraska</option>
+                      <option value="NV">Nevada</option>
+                      <option value="NH">New Hampshire</option>
+                      <option value="NJ">New Jersey</option>
+                      <option value="NM">New Mexico</option>
+                      <option value="NY">New York</option>
+                      <option value="NC">North Carolina</option>
+                      <option value="ND">North Dakota</option>
+                      <option value="OH">Ohio</option>
+                      <option value="OK">Oklahoma</option>
+                      <option value="OR">Oregon</option>
+                      <option value="PA">Pennsylvania</option>
+                      <option value="RI">Rhode Island</option>
+                      <option value="SC">South Carolina</option>
+                      <option value="SD">South Dakota</option>
+                      <option value="TN">Tennessee</option>
+                      <option value="TX">Texas</option>
+                      <option value="UT">Utah</option>
+                      <option value="VT">Vermont</option>
+                      <option value="VA">Virginia</option>
+                      <option value="WA">Washington</option>
+                      <option value="WV">West Virginia</option>
+                      <option value="WI">Wisconsin</option>
+                      <option value="WY">Wyoming</option>
+                    </select>
+                  </div>
+                  <div class="col-12 d-flex justify-content-between">
+                    <button class="btn btn-label-secondary btn-prev">
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
+                  </div>
+                </div>
+              </div>
+              <!-- Billing Links -->
+              <div id="billingLinksValidation" class="content">
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Select Plan</h4>
+                  <p class="mb-0">Select plan as per your requirement</p>
+                </div>
+                <!-- Custom plan options -->
+                <div class="row gap-md-0 gap-4 mb-12">
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="basicOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Basic</span>
+                          <span>A simple start for start ups & Students</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">0</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="basicOption" />
+                      </label>
+                    </div>
+                  </div>
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="standardOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Standard</span>
+                          <span>For small to medium businesses</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">99</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="standardOption" checked />
+                      </label>
+                    </div>
+                  </div>
+                  <div class="col-md">
+                    <div class="form-check custom-option custom-option-icon">
+                      <label class="form-check-label custom-option-content" for="enterpriseOption">
+                        <span class="custom-option-body">
+                          <span class="d-block mb-2 h5">Enterprise</span>
+                          <span>Solution for enterprise & organizations</span>
+                          <span class="d-flex justify-content-center mt-2">
+                            <sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
+                            <span class="fw-medium h3 text-primary mb-0">499</span>
+                            <sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/year</sub>
+                          </span>
+                        </span>
+                        <input name="customRadioIcon" class="form-check-input" type="radio" value="" id="enterpriseOption" />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <!--/ Custom plan options -->
+                <div class="content-header mb-6">
+                  <h4 class="mb-0">Payment Information</h4>
+                  <p class="mb-0">Enter your card information</p>
+                </div>
+                <!-- Credit Card Details -->
+                <div class="row g-6">
+                  <div class="col-md-12 form-control-validation">
+                    <label class="form-label w-100" for="multiStepsCard">Card Number</label>
+                    <div class="input-group input-group-merge">
+                      <input id="multiStepsCard" class="form-control multi-steps-card" name="multiStepsCard" type="text" placeholder="1356 3215 6548 7898" aria-describedby="multiStepsCardImg" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsCardImg"><span class="card-type"></span></span>
+                    </div>
+                  </div>
+                  <div class="col-md-5">
+                    <label class="form-label" for="multiStepsName">Name On Card</label>
+                    <input type="text" id="multiStepsName" class="form-control" name="multiStepsName" placeholder="John Doe" />
+                  </div>
+                  <div class="col-6 col-md-4">
+                    <label class="form-label" for="multiStepsExDate">Expiry Date</label>
+                    <input type="text" id="multiStepsExDate" class="form-control multi-steps-exp-date" name="multiStepsExDate" placeholder="MM/YY" />
+                  </div>
+                  <div class="col-6 col-md-3">
+                    <label class="form-label" for="multiStepsCvv">CVV Code</label>
+                    <div class="input-group input-group-merge">
+                      <input type="text" id="multiStepsCvv" class="form-control multi-steps-cvv" name="multiStepsCvv" maxlength="3" placeholder="654" />
+                      <span class="input-group-text cursor-pointer" id="multiStepsCvvHelp"><i class="icon-base ti tabler-help text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
+                    </div>
+                  </div>
+                  <div class="col-12 d-flex justify-content-between form-control-validation">
+                    <button class="btn btn-label-secondary btn-prev">
+                      <i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
+                      <span class="align-middle d-sm-inline-block d-none">Previous</span>
+                    </button>
+                    <button type="submit" class="btn btn-success btn-next btn-submit">Submit</button>
+                  </div>
+                </div>
+                <!--/ Credit Card Details -->
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- / Multi Steps Registration -->
+  </div>
+</div>
+
+<script>
+// Check selected custom option
+window.Helpers.initCustomOptionCheck();
+</script>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/ResetPasswordBasic.cshtml

@@ -0,0 +1,68 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Reset Password Basic - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="container-xxl">
+  <div class="authentication-wrapper authentication-basic container-p-y">
+    <div class="authentication-inner py-6">
+      <!-- Reset Password -->
+      <div class="card">
+        <div class="card-body">
+          <!-- Logo -->
+          <div class="app-brand justify-content-center mb-6">
+            <a href="/" class="app-brand-link">
+              <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+              <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+            </a>
+          </div>
+          <!-- /Logo -->
+          <h4 class="mb-1">Reset Password 🔒</h4>
+          <p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
+          <form id="formAuthentication" action="~/Auth/LoginBasic" method="POST">
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="password">New Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <div class="mb-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="confirm-password">Confirm Password</label>
+              <div class="input-group input-group-merge">
+                <input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+              </div>
+            </div>
+            <button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
+            <div class="text-center">
+              <a href="/Auth/LoginBasic" class="d-flex justify-content-center">
+                <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+                Back to login
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- /Reset Password -->
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/ResetPasswordCover.cshtml

@@ -0,0 +1,73 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Reset Password Cover - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-reset-password-illustration-light.png" alt="auth-reset-password-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-reset-password-illustration-light.png" data-app-dark-img="illustrations/auth-reset-password-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-reset-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Reset Password -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 pt-5">
+        <h4 class="mb-1">Reset Password 🔒</h4>
+        <p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
+        <form id="formAuthentication" class="mb-6" action="~/Auth/LoginCover" method="POST">
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="password">New Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <div class="mb-6 form-password-toggle form-control-validation">
+            <label class="form-label" for="confirm-password">Confirm Password</label>
+            <div class="input-group input-group-merge">
+              <input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+              <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
+            </div>
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
+          <div class="text-center">
+            <a href="/Auth/LoginCover" class="d-flex justify-content-center">
+              <i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
+              Back to login
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- /Reset Password -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/TwoStepsBasic.cshtml

@@ -0,0 +1,68 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "TwoSteps Basic - Pages";
+}
+
+@section VendorStyles {
+  <link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+  <script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+  <script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+  <script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+  <script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+  <link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+  <script src="~/js/pages-auth.js"></script>
+  <script src="~/js/pages-auth-two-steps.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-basic px-6">
+  <div class="authentication-inner py-6">
+    <!--  Two Steps Verification -->
+    <div class="card">
+      <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+          <a href="/" class="app-brand-link">
+            <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+            <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+          </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Two Step Verification 💬</h4>
+        <p class="text-start mb-6">
+          We sent a verification code to your mobile. Enter the code from the mobile in the field below.
+          <span class="fw-medium d-block mt-1 text-heading">******1234</span>
+        </p>
+        <p class="mb-0">Type your 6 digit security code</p>
+        <form id="twoStepsForm" action="/" method="POST">
+          <div class="mb-6 form-control-validation">
+            <div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+            </div>
+            <!-- Create a hidden field which is combined by 3 fields above -->
+            <input type="hidden" name="otp" />
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
+          <div class="text-center">
+            Didn't get the code?
+            <a href="javascript:void(0);"> Resend </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- / Two Steps Verification -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/TwoStepsCover.cshtml

@@ -0,0 +1,75 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "TwoSteps Cover - Pages";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@section PageScripts {
+<script src="~/js/pages-auth.js"></script>
+<script src="~/js/pages-auth-two-steps.js"></script>
+}
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-two-step-illustration-light.png" alt="auth-two-steps-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-two-step-illustration-light.png" data-app-dark-img="illustrations/auth-two-step-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-two-steps-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!-- Two Steps Verification -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Two Step Verification 💬</h4>
+        <p class="text-start mb-6">
+          We sent a verification code to your mobile. Enter the code from the mobile in the field below.
+          <span class="fw-medium d-block mt-1 text-heading">******1234</span>
+        </p>
+        <p class="mb-0">Type your 6 digit security code</p>
+        <form id="twoStepsForm" action="/" method="POST">
+          <div class="mb-6 form-control-validation">
+            <div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+              <input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
+            </div>
+            <!-- Create a hidden field which is combined by 3 fields above -->
+            <input type="hidden" name="otp" />
+          </div>
+          <button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
+          <div class="text-center">
+            Didn't get the code?
+            <a href="javascript:void(0);"> Resend </a>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- /Two Steps Verification -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/VerifyEmailBasic.cshtml

@@ -0,0 +1,34 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Verify Email Basic - Pages";
+}
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-basic px-6">
+  <div class="authentication-inner py-6">
+    <!-- Verify Email -->
+    <div class="card">
+      <div class="card-body">
+        <!-- Logo -->
+        <div class="app-brand justify-content-center mb-6">
+          <a href="/" class="app-brand-link">
+            <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+            <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+          </a>
+        </div>
+        <!-- /Logo -->
+        <h4 class="mb-1">Verify your email ✉️</h4>
+        <p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello&#64;example.com</span> Please follow the link inside to continue.</p>
+        <a class="btn btn-primary w-100 my-6" href="/"> Skip for now </a>
+        <p class="text-center mb-0">
+          Didn't get the mail?
+          <a href="javascript:void(0);"> Resend </a>
+        </p>
+      </div>
+    </div>
+    <!-- /Verify Email -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Auth/VerifyEmailCover.cshtml

@@ -0,0 +1,44 @@
+@{
+  Layout = "_BlankLayout";
+  ViewData["Title"] = "Verify Email Cover - Pages";
+}
+
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/page-auth.css" />
+}
+
+
+@* ************** Content ************** *@
+<div class="authentication-wrapper authentication-cover">
+  <!-- Logo -->
+  <a href="/" class="app-brand auth-cover-brand">
+    <span class="app-brand-logo demo">@await Html.PartialAsync("../_Partials/_Macros")</span>
+    <span class="app-brand-text demo text-heading fw-bold">@TempData.Peek("appName")</span>
+  </a>
+  <!-- /Logo -->
+  <div class="authentication-inner row m-0">
+    <!-- /Left Text -->
+    <div class="d-none d-xl-flex col-xl-8 p-0">
+      <div class="auth-cover-bg d-flex justify-content-center align-items-center">
+        <img src="~/img/illustrations/auth-verify-email-illustration-light.png" alt="auth-verify-email-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-verify-email-illustration-light.png" data-app-dark-img="illustrations/auth-verify-email-illustration-dark.png" />
+        <img src="~/img/illustrations/bg-shape-image-light.png" alt="auth-verify-email-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
+      </div>
+    </div>
+    <!-- /Left Text -->
+
+    <!--  Verify email -->
+    <div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
+      <div class="w-px-400 mx-auto mt-12 mt-5">
+        <h4 class="mb-1">Verify your email ✉️</h4>
+        <p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello&#64;example.com</span> Please follow the link inside to continue.</p>
+        <a class="btn btn-primary w-100 my-6" href="/"> Skip for now </a>
+        <p class="text-center mb-0">
+          Didn't get the mail?
+          <a href="javascript:void(0);"> Resend </a>
+        </p>
+      </div>
+    </div>
+    <!-- / Verify email -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Cards/Actions.cshtml

@@ -0,0 +1,405 @@
+@{
+  ViewData["Title"] = "Cards Actions- UI elements";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/spinkit/spinkit.css" />
+<link rel="stylesheet" href="~/vendor/libs/notiflix/notiflix.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/notiflix/notiflix.js"></script>
+<script src="~/vendor/libs/sortablejs/sortable.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/cards-actions.js"></script>
+}
+@* ************** Content ************** *@
+<!-- Cards Action -->
+<div class="card card-action mb-12">
+  <div class="card-alert"></div>
+  <div class="card-header">
+    <h5 class="card-action-title mb-0">Cards Action</h5>
+    <div class="card-action-element">
+      <ul class="list-inline mb-0">
+        <li class="list-inline-item">
+          <a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-up icon-sm"></i></a>
+        </li>
+        <li class="list-inline-item">
+          <a href="javascript:void(0);" class="card-reload"><i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl icon-sm"></i></a>
+        </li>
+        <li class="list-inline-item">
+          <a href="javascript:void(0);" class="card-expand"><i class="icon-base ti tabler-arrows-maximize me-2 icon-sm"></i></a>
+        </li>
+        <li class="list-inline-item">
+          <a href="javascript:void(0);" class="card-close"><i class="icon-base ti tabler-x icon-sm"></i></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="collapse show">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Action</th>
+          <th class="text-center">Icon</th>
+          <th>Details</th>
+        </tr>
+      </thead>
+      <tbody class="table-border-bottom-0">
+        <tr>
+          <td>Collapse</td>
+          <td class="text-center">
+            <i class="icon-base ti tabler-chevron-up icon-sm"></i>
+          </td>
+          <td>Collapse card content using collapse action.</td>
+        </tr>
+        <tr>
+          <td>Refresh Content</td>
+          <td class="text-center">
+            <i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl icon-sm"></i>
+          </td>
+          <td>Refresh your card content using refresh action.</td>
+        </tr>
+        <tr>
+          <td>Expand Card</td>
+          <td class="text-center">
+            <i class="icon-base ti tabler-arrows-maximize icon-sm"></i>
+          </td>
+          <td>Maximize your card using expand action</td>
+        </tr>
+        <tr>
+          <td>Remove Card</td>
+          <td class="text-center">
+            <i class="icon-base ti tabler-x icon-sm"></i>
+          </td>
+          <td>Remove card from page using remove card action</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<h6 class="pb-1 mb-6 text-body-secondary">Examples</h6>
+<p>Use <code>.card-action</code> class with <code>.card</code> class to create action card. Use <code>.card-action-title</code> for action card title and <code>.card-action-element</code> to warp the actions icons.</p>
+<div class="row mb-12">
+  <div class="col-md">
+    <div class="card card-action mb-6">
+      <div class="card-header">
+        <h5 class="card-action-title mb-0">Collapsible Card</h5>
+        <div class="card-action-element">
+          <ul class="list-inline mb-0">
+            <li class="list-inline-item">
+              <a href="javascript:void(0);" class="card-collapsible"><i class="icon-base ti tabler-chevron-up"></i></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="collapse show">
+        <div class="card-body">
+          <p class="card-text">To create a collapsible card, use <code>.card-collapsible</code> class with action item. To show the collapsible content default use <code>.show</code> class with <code>.collapse</code>.</p>
+          <p class="card-text">Click on <i class="icon-base ti tabler-chevron-up"></i> to see card collapse in action.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card card-action mb-6">
+      <div class="card-alert"></div>
+      <div class="card-header">
+        <h5 class="card-action-title mb-0">Refresh Content</h5>
+        <div class="card-action-element">
+          <ul class="list-inline mb-0">
+            <li class="list-inline-item">
+              <a href="javascript:void(0);" class="card-reload"><i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl"></i></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="card-body">
+        <p class="card-text">To create a card with refresh action, use <code>.card-reload</code> class with action item. Use <code>.card-alert</code> class to show custom response message.</p>
+        <p class="card-text">Click on <i class="icon-base ti tabler-rotate-clockwise-2 scaleX-n1-rtl"></i> icon to see refresh card content in action.</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-100"></div>
+  <div class="col-md">
+    <div class="card card-action mb-6">
+      <div class="card-header">
+        <h5 class="card-action-title mb-0">Expand Card</h5>
+        <div class="card-action-element">
+          <ul class="list-inline mb-0">
+            <li class="list-inline-item">
+              <a href="javascript:void(0);" class="card-expand"><i class="icon-base ti tabler-arrows-maximize"></i></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="card-body">
+        <p class="card-text">To create a card with expand(fullscreen) action, use <code>.card-expand</code> class with action item. Use <kbd>ESC</kbd> key to exit from the arrows-maximize mode.</p>
+        <p class="card-text">Click on <i class="icon-base ti tabler-arrows-maximize"></i> icon to see expand card in action.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card card-action mb-6">
+      <div class="card-alert"></div>
+      <div class="card-header">
+        <h5 class="card-action-title mb-0">Remove Card</h5>
+        <div class="card-action-element">
+          <ul class="list-inline mb-0">
+            <li class="list-inline-item">
+              <a href="javascript:void(0);" class="card-close"><i class="icon-base ti tabler-x"></i></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Remove card action hide the card, use <code>.card-close</code> class with action item.</p>
+        <br />
+        <p class="card-text">Click on <i class="icon-base ti tabler-x"></i> icon to see remove card in action.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Cards Action -->
+
+<!-- Header elements -->
+<h5 class="mb-6">Header Elements</h5>
+<div class="row mb-12">
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-header header-elements">
+        <h5 class="mb-0 me-2">Card Header</h5>
+        <div class="card-header-elements ms-auto">
+          <span class="badge bg-primary rounded-pill">New</span>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Sample card header with badge.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-body">
+        <div class="card-title header-elements">
+          <h5 class="m-0 me-2">Card Title</h5>
+          <div class="card-title-elements ms-auto">
+            <span class="badge bg-primary rounded-pill">10</span>
+          </div>
+        </div>
+        <p class="card-text">Sample card title with outline badge.</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-100"></div>
+
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-header header-elements">
+        <h5 class="mb-0 me-2">Card Header</h5>
+
+        <div class="card-header-elements ms-auto">
+          <button type="button" class="btn btn-xs btn-primary"><span class="icon-base ti tabler-plus icon-xs me-1"></span>Button</button>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Sample card header with extra small button.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-body">
+        <div class="card-title header-elements">
+          <h5 class="m-0 me-2">Card Title</h5>
+          <div class="card-title-elements ms-auto">
+            <button type="button" class="btn btn-icon btn-sm btn-primary">
+              <span class="icon-base ti tabler-brand-shopee icon-20px"></span>
+            </button>
+          </div>
+        </div>
+        <p class="card-text">Sample card title with small icon button.</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-100"></div>
+
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-header header-elements">
+        <h5 class="mb-0 me-2">Card Header</h5>
+
+        <div class="card-header-elements ms-auto">
+          <input type="text" class="form-control form-control-sm" placeholder="Search" />
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Sample card header with extra search input box.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-body">
+        <div class="card-title header-elements">
+          <h5 class="m-0 me-2">Card Title</h5>
+          <div class="card-title-elements ms-auto">
+            <div class="form-check form-switch me-n2 mb-0">
+              <input type="checkbox" class="form-check-input" />
+            </div>
+          </div>
+        </div>
+        <p class="card-text">Sample card title with switch.</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-100"></div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-header header-elements">
+        <h5 class="mb-0 me-2">Card Header</h5>
+        <div class="card-header-elements ms-auto">
+          <span class="icon-base ti tabler-bell icon-xs text-body-secondary"></span>
+          <span class="text text-body-secondary d-flex">
+            <small>Sample Text</small>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Sample card header with text.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-body">
+        <div class="card-title header-elements">
+          <h5 class="m-0 me-2">Card Title</h5>
+          <div class="card-header-elements ms-auto">
+            <span class="icon-base ti tabler-bell icon-xs text-body-secondary"></span>
+            <span class="text text-body-secondary d-flex">
+              <small>Sample Text</small>
+            </span>
+          </div>
+        </div>
+        <p class="card-text">Sample card title with text.</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-100"></div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-header header-elements">
+        <h5 class="mb-0 me-2">Card Header</h5>
+        <div class="card-header-elements">
+          <span class="badge bg-danger rounded-pill">Hello!</span>
+        </div>
+        <div class="card-header-elements ms-auto">
+          <div class="btn-group">
+            <button type="button" class="btn btn-primary">Primary</button>
+            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="javascript:void(0)">Action</a>
+              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
+              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <p class="card-text">Sample card header with badge and dropdown.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card mb-6">
+      <div class="card-body">
+        <div class="card-title header-elements">
+          <h5 class="m-0 me-2">Card Title</h5>
+          <div class="card-title-elements">
+            <div class="form-check form-switch mb-0">
+              <input type="checkbox" class="form-check-input mt-50" />
+            </div>
+          </div>
+          <div class="card-title-elements ms-auto">
+            <select class="form-select form-select-sm w-auto">
+              <option selected="">Option 1</option>
+              <option>Option 2</option>
+              <option>Option 3</option>
+            </select>
+          </div>
+        </div>
+        <p class="card-text">Sample card title with switch, select box & button.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Header elements -->
+
+<!-- Draggable Cards -->
+<h5 class="pb-1 mb-6">Draggable Cards</h5>
+<div class="row gy-4" id="sortable-4">
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-primary text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Primary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-secondary text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Secondary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-success text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Success card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-danger text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Danger card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-warning text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Warning card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card bg-info text-white">
+      <div class="card-header cursor-move text-white">Drag me!</div>
+      <div class="card-body">
+        <h5 class="card-title text-white">Info card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Draggable Cards -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Cards/Analytics.cshtml

@@ -0,0 +1,606 @@
+@{
+  ViewData["Title"] = "Cards Analytics - UI elements";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-logistics-dashboard.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/cards-analytics.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Earning Reports -->
+  <div class="col-lg-6 order-md-0 order-lg-0">
+    <div class="card h-100">
+      <div class="card-header pb-0 d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Earning Reports</h5>
+          <p class="card-subtitle">Weekly Earnings Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReportsId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="row align-items-center g-md-8">
+          <div class="col-12 col-md-5 d-flex flex-column">
+            <div class="d-flex gap-2 align-items-center mb-3 flex-wrap">
+              <h2 class="mb-0">$468</h2>
+              <div class="badge rounded bg-label-success">+4.2%</div>
+            </div>
+            <small class="text-body">You informed of this week compared to last week</small>
+          </div>
+          <div class="col-12 col-md-7 ps-xl-8">
+            <div id="weeklyEarningReports"></div>
+          </div>
+        </div>
+        <div class="border rounded p-5 mt-5">
+          <div class="row gap-4 gap-sm-0">
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-primary p-1"><i class="icon-base ti tabler-currency-dollar icon-sm"></i></div>
+                <h6 class="mb-0 fw-normal">Earnings</h6>
+              </div>
+              <h4 class="my-2">$545.69</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-info p-1"><i class="icon-base ti tabler-chart-pie-2 icon-sm"></i></div>
+                <h6 class="mb-0 fw-normal">Profit</h6>
+              </div>
+              <h4 class="my-2">$256.34</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-danger p-1"><i class="icon-base ti tabler-brand-paypal icon-sm"></i></div>
+                <h6 class="mb-0 fw-normal">Expense</h6>
+              </div>
+              <h4 class="my-2">$74.19</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Support Tracker -->
+  <div class="col-md-6 order-md-3 order-lg-0">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Support Tracker</h5>
+          <p class="card-subtitle">Last 7 Days</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="supportTrackerMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="supportTrackerMenu">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body row">
+        <div class="col-12 col-sm-4 col-md-12 col-lg-4">
+          <div class="mt-lg-4 mt-lg-2 mb-lg-6 mb-2">
+            <h2 class="mb-0">164</h2>
+            <p class="mb-0">Total Tickets</p>
+          </div>
+          <ul class="p-0 m-0">
+            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
+              <div class="badge rounded bg-label-primary p-1_5"><i class="icon-base ti tabler-ticket icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">New Tickets</h6>
+                <small class="text-body-secondary">142</small>
+              </div>
+            </li>
+            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
+              <div class="badge rounded bg-label-info p-1_5"><i class="icon-base ti tabler-circle-check icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">Open Tickets</h6>
+                <small class="text-body-secondary">28</small>
+              </div>
+            </li>
+            <li class="d-flex gap-4 align-items-center pb-1">
+              <div class="badge rounded bg-label-warning p-1_5"><i class="icon-base ti tabler-clock icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">Response Time</h6>
+                <small class="text-body-secondary">1 Day</small>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="col-12 col-sm-8 col-md-12 col-lg-8">
+          <div id="supportTracker"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sales last 6 months -->
+  <div class="col-md-6 col-lg-4 order-md-2 order-lg-0">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between pb-4">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Sales</h5>
+          <p class="card-subtitle">Last 6 Months</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="salesLastMonthMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesLastMonthMenu">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="salesLastMonth"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Revenue Report -->
+  <div class="col-12 col-lg-8 order-md-1 order-lg-0">
+    <div class="card h-100">
+      <div class="card-body p-0">
+        <div class="row row-bordered g-0">
+          <div class="col-md-8 position-relative p-6">
+            <div class="card-header d-inline-block p-0 text-wrap position-absolute">
+              <h5 class="m-0 card-title">Revenue Report</h5>
+            </div>
+            <div id="totalRevenueChart" class="mt-n1"></div>
+          </div>
+          <div class="col-md-4 p-4">
+            <div class="text-center mt-5">
+              <div class="dropdown">
+                <button class="btn btn-sm btn-label-primary dropdown-toggle" type="button" id="budgetId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <script>
+                    document.write(new Date().getFullYear());
+                  </script>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="budgetId">
+                  <a class="dropdown-item prev-year1" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 1);
+                    </script>
+                  </a>
+                  <a class="dropdown-item prev-year2" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 2);
+                    </script>
+                  </a>
+                  <a class="dropdown-item prev-year3" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 3);
+                    </script>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <h3 class="text-center pt-8 mb-0">$25,825</h3>
+            <p class="mb-8 text-center"><span class="fw-medium text-heading">Budget: </span>56,800</p>
+            <div class="px-3">
+              <div id="budgetChart"></div>
+            </div>
+            <div class="text-center mt-8">
+              <button type="button" class="btn btn-primary">Increase Button</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Project Status -->
+  <div class="col-lg-6 col-xl-4 order-3 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="mb-0 card-title">Project Status</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="projectStatusId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="projectStatusId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-flex align-items-start">
+          <div class="badge rounded bg-label-primary p-2 me-3 rounded"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">$4,3742</h6>
+              <small class="text-body">Your Earnings</small>
+            </div>
+            <h6 class="mb-0 text-success">+10.2%</h6>
+          </div>
+        </div>
+        <div id="projectStatusChart"></div>
+        <div class="d-flex justify-content-between mb-4">
+          <h6 class="mb-0">Donates</h6>
+          <div class="d-flex">
+            <p class="mb-0 me-4">$756.26</p>
+            <p class="mb-0 text-danger">-139.34</p>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between">
+          <h6 class="mb-0">Podcasts</h6>
+          <div class="d-flex">
+            <p class="mb-0 me-4">$2,207.03</p>
+            <p class="mb-0 text-success">+576.24</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Earning Reports Tabs-->
+  <div class="col-12 col-xl-8 order-1 order-lg-0">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title m-0">
+          <h5 class="mb-1">Earning Reports</h5>
+          <p class="card-subtitle">Yearly Earnings Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsTabsId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReportsTabsId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="nav nav-tabs widget-nav-tabs pb-8 gap-4 mx-1 d-flex flex-nowrap" role="tablist">
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn active d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-orders-id" aria-controls="navs-orders-id" aria-selected="true">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-shopping-cart icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Orders</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-sales-id" aria-controls="navs-sales-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-bar icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Sales</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-profit-id" aria-controls="navs-profit-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Profit</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-income-id" aria-controls="navs-income-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-pie-2 icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Income</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex align-items-center justify-content-center disabled" role="tab" data-bs-toggle="tab" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-plus icon-md"></i></div>
+            </a>
+          </li>
+        </ul>
+        <div class="tab-content p-0 ms-0 ms-sm-2">
+          <div class="tab-pane fade show active" id="navs-orders-id" role="tabpanel">
+            <div id="earningReportsTabsOrders"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-sales-id" role="tabpanel">
+            <div id="earningReportsTabsSales"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-profit-id" role="tabpanel">
+            <div id="earningReportsTabsProfit"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-income-id" role="tabpanel">
+            <div id="earningReportsTabsIncome"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Total Earning -->
+  <div class="col-12 col-md-6 col-xl-4 order-2 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h5 class="mb-0 card-title">Total Earning</h5>
+          <div class="dropdown">
+            <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="totalEarning" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+            </button>
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalEarning">
+              <a class="dropdown-item" href="javascript:void(0);">View More</a>
+              <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex align-items-center">
+          <h2 class="mb-0 me-2">87%</h2>
+          <i class="icon-base ti tabler-chevron-up text-success me-1"></i>
+          <h6 class="text-success mb-0">25.8%</h6>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="totalEarningChart"></div>
+        <div class="d-flex align-items-start my-4">
+          <div class="badge rounded bg-label-primary p-2 me-4 rounded"><i class="icon-base ti tabler-brand-paypal icon-md"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">Total Revenue</h6>
+              <small class="text-body">Client Payment</small>
+            </div>
+            <h6 class="mb-0 text-success">+$126</h6>
+          </div>
+        </div>
+        <div class="d-flex align-items-start">
+          <div class="badge rounded bg-label-secondary p-2 me-4 rounded"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">Total Sales</h6>
+              <small class="text-body">Refund</small>
+            </div>
+            <h6 class="mb-0 text-success">+$98</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Carrier Performance -->
+  <div class="col-12 col-lg-8">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title m-0 me-2">Carrier Performance</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="performance" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="performance">
+            <a class="dropdown-item" href="javascript:void(0);">Delivery rate</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delivery time</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delivery exceptions</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="carrierPerformance"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delivery Exceptions -->
+  <div class="col-12 col-md-6 col-lg-4 order-1 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="m-0 me-2">Reasons for delivery exceptions</h5>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="deliveryExceptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="deliveryExceptions">
+            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="deliveryExceptionsChart"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Vehicles overview -->
+  <div class="col-12 col-lg-8 order-3 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="m-0 me-2">Vehicles Overview</h5>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="vehiclesOverview" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="vehiclesOverview">
+            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-none d-lg-flex vehicles-progress-labels mb-6">
+          <div class="vehicles-progress-label on-the-way-text" style="width: 39.7%;">On the way</div>
+          <div class="vehicles-progress-label unloading-text" style="width: 28.3%;">Unloading</div>
+          <div class="vehicles-progress-label loading-text" style="width: 17.4%;">Loading</div>
+          <div class="vehicles-progress-label waiting-text text-nowrap" style="width: 14.6%;">Waiting</div>
+        </div>
+        <div class="vehicles-overview-progress progress rounded-3 mb-6" style="height: 46px;">
+          <div class="progress-bar fw-medium text-start bg-lighter text-heading px-4 rounded-0" role="progressbar" style="width: 39.7%" aria-valuenow="39.7" aria-valuemin="0" aria-valuemax="100">39.7%</div>
+          <div class="progress-bar fw-medium text-start bg-primary px-4" role="progressbar" style="width: 28.3%" aria-valuenow="28.3" aria-valuemin="0" aria-valuemax="100">28.3%</div>
+          <div class="progress-bar fw-medium text-start text-bg-info px-2 px-sm-4" role="progressbar" style="width: 17.4%" aria-valuenow="17.4" aria-valuemin="0" aria-valuemax="100">17.4%</div>
+          <div class="progress-bar fw-medium text-start snackbar text-paper px-1 px-sm-3 rounded-0 px-lg-4" role="progressbar" style="width: 14.6%" aria-valuenow="14.6" aria-valuemin="0" aria-valuemax="100">14.6%</div>
+        </div>
+        <div class="table-responsive">
+          <table class="table card-table">
+            <tbody class="table-border-bottom-0">
+              <tr>
+                <td class="w-50 ps-0">
+                  <div class="d-flex justify-content-start align-items-center">
+                    <div class="me-2">
+                      <i class="icon-base ti tabler-car icon-lg text-heading"></i>
+                    </div>
+                    <h6 class="mb-0 fw-normal">On the way</h6>
+                  </div>
+                </td>
+                <td class="text-end pe-0 text-nowrap">
+                  <h6 class="mb-0">2hr 10min</h6>
+                </td>
+                <td class="text-end pe-0">
+                  <span>39.7%</span>
+                </td>
+              </tr>
+              <tr>
+                <td class="w-50 ps-0">
+                  <div class="d-flex justify-content-start align-items-center">
+                    <div class="me-2">
+                      <i class="icon-base ti tabler-circle-arrow-down icon-lg text-heading"></i>
+                    </div>
+                    <h6 class="mb-0 fw-normal">Unloading</h6>
+                  </div>
+                </td>
+                <td class="text-end pe-0 text-nowrap">
+                  <h6 class="mb-0">3hr 15min</h6>
+                </td>
+                <td class="text-end pe-0">
+                  <span>28.3%</span>
+                </td>
+              </tr>
+              <tr>
+                <td class="w-50 ps-0">
+                  <div class="d-flex justify-content-start align-items-center">
+                    <div class="me-2">
+                      <i class="icon-base ti tabler-circle-arrow-up icon-lg text-heading"></i>
+                    </div>
+                    <h6 class="mb-0 fw-normal">Loading</h6>
+                  </div>
+                </td>
+                <td class="text-end pe-0 text-nowrap">
+                  <h6 class="mb-0">1hr 24min</h6>
+                </td>
+                <td class="text-end pe-0">
+                  <span>17.4%</span>
+                </td>
+              </tr>
+              <tr>
+                <td class="w-50 ps-0">
+                  <div class="d-flex justify-content-start align-items-center">
+                    <div class="me-2">
+                      <i class="icon-base ti tabler-clock icon-lg text-heading"></i>
+                    </div>
+                    <h6 class="mb-0 fw-normal">Waiting</h6>
+                  </div>
+                </td>
+                <td class="text-end pe-0 text-nowrap">
+                  <h6 class="mb-0">5hr 19min</h6>
+                </td>
+                <td class="text-end pe-0">
+                  <span>14.6%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Interested Topics -->
+  <div class="col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title m-0 me-2">Topic you are interested in</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="topic" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
+            <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
+            <a class="dropdown-item" href="javascript:void(0);">See All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body row g-3">
+        <div class="col-md-8">
+          <div id="horizontalBarChart"></div>
+        </div>
+        <div class="col-md-4 d-flex justify-content-around align-items-center">
+          <div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-primary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">UI Design</p>
+                <h5>35%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline my-12">
+              <span class="text-success me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">Music</p>
+                <h5>14%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-danger me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">React</p>
+                <h5>10%</h5>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-info me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">UX Design</p>
+                <h5>20%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline my-12">
+              <span class="text-secondary me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">Animation</p>
+                <h5>12%</h5>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+              <span class="text-warning me-2"><i class="icon-base ti tabler-circle-filled icon-12px"></i></span>
+              <div>
+                <p class="mb-0">SEO</p>
+                <h5>9%</h5>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Cards/Basic.cshtml

@@ -0,0 +1,666 @@
+@{
+  ViewData["Title"] = "Cards basic - UI elements";
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/masonry/masonry.js"></script>
+}
+
+@* ************** Content ************** *@
+<!-- Examples -->
+<div class="row mb-12 g-6">
+  <div class="col-md-6 col-lg-4">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/2.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="javascript:void(0)" class="btn btn-outline-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card h-100">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Support card subtitle</h6>
+      </div>
+      <img class="img-fluid" src="~/img/elements/5.png" alt="Card image cap" />
+      <div class="card-body">
+        <p class="card-text">Bear claw sesame snaps gummies chocolate.</p>
+        <a href="javascript:void(0);" class="card-link">Card link</a>
+        <a href="javascript:void(0);" class="card-link">Another link</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card h-100">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle">Support card subtitle</h6>
+        <img class="img-fluid d-flex mx-auto my-6 rounded" src="~/img/elements/4.png" alt="Card image cap" />
+        <p class="card-text">Bear claw sesame snaps gummies chocolate.</p>
+        <a href="javascript:void(0);" class="card-link">Card link</a>
+        <a href="javascript:void(0);" class="card-link">Another link</a>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Examples -->
+
+<!-- Content types -->
+<h5 class="pb-1 mb-6">Content types</h5>
+
+<div class="row mb-12 g-6">
+  <div class="col-md-6 col-lg-4">
+    <h6 class="mt-2 text-body-secondary">Body</h6>
+    <div class="card mb-6">
+      <div class="card-body">
+        <p class="card-text">This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut.</p>
+      </div>
+    </div>
+    <h6 class="mt-2 text-body-secondary">Titles, text, and links</h6>
+    <div class="card mb-6">
+      <div class="card-body">
+        <h5 class="card-title mb-1">Card title</h5>
+        <div class="card-subtitle mb-4">Card subtitle</div>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="javascript:void(0)" class="card-link">Card link</a>
+        <a href="javascript:void(0)" class="card-link">Another link</a>
+      </div>
+    </div>
+    <h6 class="mt-2 text-body-secondary">List groups</h6>
+    <div class="card mb-6">
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+        <li class="list-group-item">Vestibulum at eros</li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <h6 class="mt-2 text-body-secondary">Images</h6>
+    <div class="card">
+      <img class="card-img-top" src="~/img/elements/5.png" alt="Card image cap" />
+      <div class="card-body">
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <p class="card-text">Cookie topping caramels jujubes gingerbread. Lollipop apple pie cupcake candy canes cookie ice cream. Wafer chocolate bar carrot cake jelly-o.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <h6 class="mt-2 text-body-secondary">Kitchen sink</h6>
+    <div class="card">
+      <img class="card-img-top" src="~/img/elements/7.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">Some quick example text to build on the card title.</p>
+      </div>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Vestibulum at eros</li>
+      </ul>
+      <div class="card-body">
+        <a href="javascript:void(0)" class="card-link">Card link</a>
+        <a href="javascript:void(0)" class="card-link">Another link</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h6 class="pb-1 mb-6 text-body-secondary">Header and footer</h6>
+<div class="row mb-12 g-6">
+  <div class="col-md-6 col-lg-4">
+    <div class="card">
+      <div class="card-header">Featured</div>
+      <div class="card-body">
+        <h5 class="card-title">Special title treatment</h5>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content natural lead-in to additional content.</p>
+        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card">
+      <h5 class="card-header">Quote</h5>
+      <div class="card-body">
+        <blockquote class="blockquote mb-0">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor sit amet, consectetur.</p>
+          <footer class="blockquote-footer">
+            Someone famous in
+            <cite title="Source Title">Source Title</cite>
+          </footer>
+        </blockquote>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card text-center">
+      <div class="card-header">Featured</div>
+      <div class="card-body">
+        <h5 class="card-title">Special title treatment</h5>
+        <p class="card-text">With supporting text below as a natural.</p>
+        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+      </div>
+      <div class="card-footer text-body-secondary">2 days ago</div>
+    </div>
+  </div>
+</div>
+<!--/ Content types -->
+
+<!-- Text alignment -->
+<h5 class="pb-1 mb-6">Text alignment</h5>
+<div class="row mb-12 g-6">
+  <div class="col-md-6 col-lg-4">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Special title treatment</h5>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card text-center">
+      <div class="card-body">
+        <h5 class="card-title">Special title treatment</h5>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-lg-4">
+    <div class="card text-end">
+      <div class="card-body">
+        <h5 class="card-title">Special title treatment</h5>
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Text alignment -->
+
+<!-- Navigation -->
+<h5 class="pb-1 mb-6">Navigation</h5>
+<div class="row mb-12 g-6">
+  <div class="col-md-6">
+    <div class="card text-center">
+      <div class="card-header px-0 pt-0">
+        <div class="nav-align-top">
+          <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+              <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tab-home" aria-controls="navs-tab-home" aria-selected="true">Home</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-tab-profile" aria-controls="navs-tab-profile" aria-selected="false">Profile</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false">Disabled</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="tab-content p-0">
+          <div class="tab-pane fade show active" id="navs-tab-home" role="tabpanel">
+            <h5 class="card-title">Special title treatment</h5>
+            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+            <a href="javascript:void(0);" class="btn btn-primary">Go home</a>
+          </div>
+          <div class="tab-pane fade" id="navs-tab-profile" role="tabpanel">
+            <h5 class="card-title">Special title treatment</h5>
+            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+            <a href="javascript:void(0);" class="btn btn-primary">Go profile</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card text-center">
+      <div class="card-header">
+        <div class="nav-align-top">
+          <ul class="nav nav-pills row-gap-2" role="tablist">
+            <li class="nav-item">
+              <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-tab-home" aria-controls="navs-pills-tab-home" aria-selected="true">Home</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-tab-profile" aria-controls="navs-pills-tab-profile" aria-selected="false">Profile</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false">Disabled</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="tab-content p-0">
+          <div class="tab-pane fade show active" id="navs-pills-tab-home" role="tabpanel">
+            <h5 class="card-title">Special title treatment</h5>
+            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+            <a href="javascript:void(0);" class="btn btn-primary">Go home</a>
+          </div>
+          <div class="tab-pane fade" id="navs-pills-tab-profile" role="tabpanel">
+            <h5 class="card-title">Special title treatment</h5>
+            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+            <a href="javascript:void(0);" class="btn btn-primary">Go profile</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Navigation -->
+
+<!-- Images -->
+<h5 class="pb-1 mb-6">Images caps & overlay</h5>
+<div class="row mb-12 g-6">
+  <div class="col-md-6 col-xl-4">
+    <div class="card">
+      <img class="card-img-top" src="~/img/elements/18.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text">
+          <small class="text-body-secondary">Last updated 3 mins ago</small>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text">
+          <small class="text-body-secondary">Last updated 3 mins ago</small>
+        </p>
+      </div>
+      <img class="card-img-bottom" src="~/img/elements/1.png" alt="Card image cap" />
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-dark border-0">
+      <img class="card-img" src="~/img/elements/12.png" alt="Card image" />
+      <div class="card-img-overlay">
+        <h5 class="card-title text-white">Card title</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text">Last updated 3 mins ago</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Images -->
+
+<!-- Horizontal -->
+<h5 class="pb-1 mb-6">Horizontal</h5>
+<div class="row mb-12 g-6">
+  <div class="col-md">
+    <div class="card">
+      <div class="row g-0">
+        <div class="col-md-4">
+          <img class="card-img card-img-left" src="~/img/elements/12.png" alt="Card image" />
+        </div>
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <div class="card">
+      <div class="row g-0">
+        <div class="col-md-8">
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <img class="card-img card-img-right" src="~/img/elements/17.png" alt="Card image" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Horizontal -->
+
+<!-- Style variation -->
+<h5 class="pb-1 mb-4">Style variation</h5>
+<h6 class="pb-1 mb-4 text-body-secondary">Default(solid)</h6>
+<div class="row g-6 mb-6">
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-primary">
+      <div class="card-body">
+        <h5 class="card-title text-white">Primary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-secondary">
+      <div class="card-body">
+        <h5 class="card-title text-white">Secondary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-success">
+      <div class="card-body">
+        <h5 class="card-title text-white">Success card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-danger">
+      <div class="card-body">
+        <h5 class="card-title text-white">Danger card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-warning">
+      <div class="card-body">
+        <h5 class="card-title text-white">Warning card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card text-bg-info">
+      <div class="card-body">
+        <h5 class="card-title text-white">Info card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Label -->
+<h6 class="pb-1 mb-4 text-body-secondary">Label</h6>
+<div class="row g-6 mb-4">
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-primary">
+      <div class="card-body">
+        <h5 class="card-title text-primary">Primary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-secondary">
+      <div class="card-body">
+        <h5 class="card-title text-secondary">Secondary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-success">
+      <div class="card-body">
+        <h5 class="card-title text-success">Success card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-danger">
+      <div class="card-body">
+        <h5 class="card-title text-danger">Danger card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-warning">
+      <div class="card-body">
+        <h5 class="card-title text-warning">Warning card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-label-info">
+      <div class="card-body">
+        <h5 class="card-title text-info">Info card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Outline -->
+<h6 class="pb-1 mb-4 text-body-secondary">Outline</h6>
+<div class="row g-6">
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-primary text-primary">
+      <div class="card-body">
+        <h5 class="card-title text-primary">Primary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-secondary text-secondary">
+      <div class="card-body">
+        <h5 class="card-title text-secondary">Secondary card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-success text-success">
+      <div class="card-body">
+        <h5 class="card-title text-success">Success card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-danger text-danger">
+      <div class="card-body">
+        <h5 class="card-title text-danger">Danger card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-warning text-warning">
+      <div class="card-body">
+        <h5 class="card-title text-warning">Warning card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6 col-xl-4">
+    <div class="card shadow-none bg-transparent border border-info text-info">
+      <div class="card-body">
+        <h5 class="card-title text-info">Info card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Style variation -->
+
+<!-- Card layout -->
+<h5 class="pb-1 my-12">Card layout</h5>
+
+<!-- Card Groups -->
+<h6 class="pb-1 mb-6 text-body-secondary">Card Groups</h6>
+<div class="card-group mb-12">
+  <div class="card">
+    <img class="card-img-top" src="~/img/elements/4.png" alt="Card image cap" />
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" src="~/img/elements/5.png" alt="Card image cap" />
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
+    </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" src="~/img/elements/1.png" alt="Card image cap" />
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+    </div>
+    <div class="card-footer">
+      <small class="text-body-secondary">Last updated 3 mins ago</small>
+    </div>
+  </div>
+</div>
+
+<!-- Grid Card -->
+<h6 class="pb-1 mb-6 text-body-secondary">Grid Card</h6>
+<div class="row row-cols-1 row-cols-md-3 g-6 mb-12">
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/2.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/5.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/4.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/18.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/19.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card h-100">
+      <img class="card-img-top" src="~/img/elements/20.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Masonry -->
+<h6 class="pb-1 mb-6 text-body-secondary">Masonry</h6>
+<div class="row g-6" data-masonry='{"percentPosition": true }'>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card">
+      <img class="card-img-top" src="~/img/elements/5.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title that wraps to a new line</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card p-4">
+      <figure class="p-4 mb-0">
+        <blockquote class="blockquote">
+          <p>A well-known quote, contained in a blockquote element.</p>
+        </blockquote>
+        <figcaption class="blockquote-footer mb-0 text-body-secondary">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card">
+      <img class="card-img-top" src="~/img/elements/18.png" alt="Card image cap" />
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card bg-primary text-white text-center p-4">
+      <figure class="mb-0">
+        <blockquote class="blockquote">
+          <p>A well-known quote, contained in a blockquote element.</p>
+        </blockquote>
+        <figcaption class="blockquote-footer mb-0 text-white">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card text-center">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card">
+      <img class="card-img-top card-img-bottom" src="~/img/elements/4.png" alt="Card image cap" />
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card p-4 text-end">
+      <figure class="mb-0">
+        <blockquote class="blockquote">
+          <p>A well-known quote, contained in a blockquote element.</p>
+        </blockquote>
+        <figcaption class="blockquote-footer mb-0 text-body-secondary">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-4">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
+      </div>
+    </div>
+  </div>
+</div>
+<!--/ Card layout -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Cards/Statistics.cshtml

@@ -0,0 +1,580 @@
+@{
+  ViewData["Title"] = "Cards Statistics - UI elements";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css">
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/cards-statistics.js"></script>
+}
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Statistics -->
+  <div class="col-lg-8 col-md-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <small class="text-body-secondary">Updated 1 month ago</small>
+      </div>
+      <div class="card-body">
+        <div class="row gy-3">
+          <div class="col-md-3 col-6">
+            <div class="d-flex align-items-center">
+              <div class="badge rounded bg-label-primary me-4 p-2"><i class="icon-base ti tabler-chart-pie-2 icon-lg"></i></div>
+              <div class="card-info">
+                <h5 class="mb-0">230k</h5>
+                <small>Sales</small>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3 col-6">
+            <div class="d-flex align-items-center">
+              <div class="badge rounded bg-label-info me-4 p-2"><i class="icon-base ti tabler-users icon-lg"></i></div>
+              <div class="card-info">
+                <h5 class="mb-0">8.549k</h5>
+                <small>Customers</small>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3 col-6">
+            <div class="d-flex align-items-center">
+              <div class="badge rounded bg-label-danger me-4 p-2"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></div>
+              <div class="card-info">
+                <h5 class="mb-0">1.423k</h5>
+                <small>Products</small>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3 col-6">
+            <div class="d-flex align-items-center">
+              <div class="badge rounded bg-label-success me-4 p-2"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
+              <div class="card-info">
+                <h5 class="mb-0">$9745</h5>
+                <small>Revenue</small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Orders -->
+  <div class="col-lg-2 col-6">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="badge rounded p-2 bg-label-danger mb-2"><i class="icon-base ti tabler-briefcase icon-lg"></i></div>
+        <h5 class="card-title mb-1">97.8k</h5>
+        <p class="mb-0">Orders</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Reviews -->
+  <div class="col-lg-2 col-6">
+    <div class="card h-100">
+      <div class="card-body text-center">
+        <div class="badge rounded p-2 bg-label-success mb-2"><i class="icon-base ti tabler-message-dots icon-lg"></i></div>
+        <h5 class="card-title mb-1">3.4k</h5>
+        <p class="mb-0">Review</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Orders last week -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-3">
+        <h5 class="card-title mb-1">Order</h5>
+        <p class="card-subtitle">Last week</p>
+      </div>
+      <div class="card-body">
+        <div id="ordersLastWeek"></div>
+        <div class="d-flex justify-content-between align-items-center gap-3">
+          <h4 class="mb-0">124k</h4>
+          <small class="text-success">+12.6%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sales last year -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="card-title mb-1">Sales</h5>
+        <p class="card-subtitle">Last Year</p>
+      </div>
+      <div id="salesLastYear"></div>
+      <div class="card-body pt-0">
+        <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+          <h4 class="mb-0">175k</h4>
+          <small class="text-danger">-16.2%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Profit last month -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="card-title mb-1">Profit</h5>
+        <p class="card-subtitle">Last Month</p>
+      </div>
+      <div class="card-body">
+        <div id="profitLastMonth"></div>
+        <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+          <h4 class="mb-0">624k</h4>
+          <small class="text-success">+8.24%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessions Last month -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="card-title mb-1">Sessions</h5>
+        <p class="card-subtitle">Last Month</p>
+      </div>
+      <div class="card-body">
+        <div id="sessionsLastMonth"></div>
+        <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+          <h4 class="mb-0">45.1k</h4>
+          <small class="text-success">+12.6%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Expenses -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-2">
+        <h5 class="card-title mb-1">82.5k</h5>
+        <p class="card-subtitle">Expenses</p>
+      </div>
+      <div class="card-body">
+        <div id="expensesChart"></div>
+        <div class="mt-3 text-center">
+          <small class="text-body-secondary mt-3">$21k Expenses more than last month</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Impression -->
+  <div class="col-xl-2 col-md-4 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="card-title mb-1">Impression</h5>
+        <p class="card-subtitle">This Week</p>
+      </div>
+      <div class="card-body">
+        <div id="impressionThisWeek"></div>
+        <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+          <h4 class="mb-0">26.1k</h4>
+          <small class="text-danger">-24.5%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card Border Shadow -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card card-border-shadow-primary h-100">
+      <div class="card-body">
+        <div class="d-flex align-items-center mb-1">
+          <div class="avatar me-4">
+            <span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-truck icon-28px"></i></span>
+          </div>
+          <h4 class="mb-0">42</h4>
+        </div>
+        <p class="mb-1">On route vehicles</p>
+        <p class="mb-0">
+          <span class="text-heading fw-medium me-2">+18.2%</span>
+          <small class="text-body-secondary">than last week</small>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card card-border-shadow-warning h-100">
+      <div class="card-body">
+        <div class="d-flex align-items-center mb-1">
+          <div class="avatar me-4">
+            <span class="avatar-initial rounded bg-label-warning"><i class="icon-base ti tabler-alert-triangle icon-28px"></i></span>
+          </div>
+          <h4 class="mb-0">8</h4>
+        </div>
+        <p class="mb-1">Vehicles with errors</p>
+        <p class="mb-0">
+          <span class="text-heading fw-medium me-2">-8.7%</span>
+          <small class="text-body-secondary">than last week</small>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card card-border-shadow-danger h-100">
+      <div class="card-body">
+        <div class="d-flex align-items-center mb-1">
+          <div class="avatar me-4">
+            <span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-git-fork icon-28px"></i></span>
+          </div>
+          <h4 class="mb-0">27</h4>
+        </div>
+        <p class="mb-1">Deviated from route</p>
+        <p class="mb-0">
+          <span class="text-heading fw-medium me-2">+4.3%</span>
+          <small class="text-body-secondary">than last week</small>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card card-border-shadow-info h-100">
+      <div class="card-body">
+        <div class="d-flex align-items-center mb-1">
+          <div class="avatar me-4">
+            <span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-clock icon-28px"></i></span>
+          </div>
+          <h4 class="mb-0">13</h4>
+        </div>
+        <p class="mb-1">Late vehicles</p>
+        <p class="mb-0">
+          <span class="text-heading fw-medium me-2">-2.5%</span>
+          <small class="text-body-secondary">than last week</small>
+        </p>
+      </div>
+    </div>
+  </div>
+  <!--/ Card Border Shadow -->
+
+  <!-- Cards with few info -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body d-flex justify-content-between align-items-center">
+        <div class="card-title mb-0">
+          <h5 class="mb-1 me-2">86%</h5>
+          <p class="mb-0">CPU Usage</p>
+        </div>
+        <div class="card-icon">
+          <span class="badge bg-label-primary rounded p-2">
+            <i class="icon-base ti tabler-cpu icon-26px"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body d-flex justify-content-between align-items-center">
+        <div class="card-title mb-0">
+          <h5 class="mb-1 me-2">1.24gb</h5>
+          <p class="mb-0">Memory Usage</p>
+        </div>
+        <div class="card-icon">
+          <span class="badge bg-label-success rounded p-2">
+            <i class="icon-base ti tabler-server icon-26px"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body d-flex justify-content-between align-items-center">
+        <div class="card-title mb-0">
+          <h5 class="mb-1 me-2">0.2%</h5>
+          <p class="mb-0">Downtime Ratio</p>
+        </div>
+        <div class="card-icon">
+          <span class="badge bg-label-danger rounded p-2">
+            <i class="icon-base ti tabler-chart-pie-2 icon-26px"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body d-flex justify-content-between align-items-center">
+        <div class="card-title mb-0">
+          <h5 class="mb-1 me-2">128</h5>
+          <p class="mb-0">Issues Found</p>
+        </div>
+        <div class="card-icon">
+          <span class="badge bg-label-warning rounded p-2">
+            <i class="icon-base ti tabler-alert-octagon icon-26px"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Cards with few info -->
+
+  <!-- Cards with charts & info -->
+  <!-- Subscriber Gained -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body pb-0">
+        <div class="card-icon">
+          <span class="badge bg-label-primary rounded p-2">
+            <i class="icon-base ti tabler-users icon-26px"></i>
+          </span>
+        </div>
+        <h5 class="card-title mb-0 mt-2">92.6k</h5>
+        <small>Subscribers Gained</small>
+      </div>
+      <div id="subscriberGained"></div>
+    </div>
+  </div>
+
+  <!-- Quarterly Sales -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body pb-0">
+        <div class="card-icon">
+          <span class="badge bg-label-danger rounded p-2">
+            <i class="icon-base ti tabler-shopping-cart icon-26px"></i>
+          </span>
+        </div>
+        <h5 class="card-title mb-0 mt-2">36.5%</h5>
+        <small>Quarterly Sales</small>
+      </div>
+      <div id="quarterlySales"></div>
+    </div>
+  </div>
+
+  <!-- Order Received -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body pb-0">
+        <div class="card-icon">
+          <span class="badge bg-label-warning rounded p-2">
+            <i class="icon-base ti tabler-package icon-26px"></i>
+          </span>
+        </div>
+        <h5 class="card-title mb-0 mt-2">97.5k</h5>
+        <small>Order Received</small>
+      </div>
+      <div id="orderReceived"></div>
+    </div>
+  </div>
+
+  <!-- Revenue Generated -->
+  <div class="col-lg-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-body pb-0">
+        <div class="card-icon">
+          <span class="badge bg-label-success rounded p-2">
+            <i class="icon-base ti tabler-credit-card icon-26px"></i>
+          </span>
+        </div>
+        <h5 class="card-title mb-0 mt-2">97.5k</h5>
+        <small>Revenue Generated</small>
+      </div>
+      <div id="revenueGenerated"></div>
+    </div>
+  </div>
+
+  <!-- Average Daily Sales -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="mb-3 card-title">Average Daily Sales</h5>
+        <p class="mb-0 text-body">Total Sales This Month</p>
+        <h4 class="mb-0">$28,450</h4>
+      </div>
+      <div class="card-body px-0">
+        <div id="averageDailySales"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sales Overview -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header">
+        <div class="d-flex justify-content-between">
+          <p class="mb-0 text-body">Sales Overview</p>
+          <p class="card-text fw-medium text-success">+18.2%</p>
+        </div>
+        <h4 class="card-title mb-1">$42.5k</h4>
+      </div>
+      <div class="card-body">
+        <div class="row mt-4">
+          <div class="col-4">
+            <div class="d-flex gap-2 align-items-center mb-2">
+              <span class="badge bg-label-info rounded"><i class="icon-base ti tabler-shopping-cart icon-18px"></i></span>
+              <p class="mb-0">Order</p>
+            </div>
+            <h5 class="mb-0 pt-1">62.2%</h5>
+            <small class="text-body-secondary">6,440</small>
+          </div>
+          <div class="col-4">
+            <div class="divider divider-vertical">
+              <div class="divider-text">
+                <span class="badge-divider-bg bg-label-secondary">VS</span>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-end">
+            <div class="d-flex gap-2 justify-content-end align-items-center mb-2">
+              <p class="mb-0">Visits</p>
+              <span class="badge bg-label-primary rounded"><i class="icon-base ti tabler-link icon-18px"></i></span>
+            </div>
+            <h5 class="mb-0 pt-1">25.5%</h5>
+            <small class="text-body-secondary">12,749</small>
+          </div>
+        </div>
+        <div class="d-flex align-items-center mt-6">
+          <div class="progress w-100" style="height: 10px;">
+            <div class="progress-bar bg-info" style="width: 70%" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+            <div class="progress-bar bg-primary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Avg Daily Traffic -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header pb-0 d-flex justify-content-between align-items-start">
+        <div class="card-title mb-0">
+          <h4 class="mb-0">2.84k</h4>
+          <small class="text-body">Avg Daily Traffic</small>
+        </div>
+        <div class="badge bg-label-success">+15%</div>
+      </div>
+      <div class="card-body">
+        <div id="averageDailyTraffic"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Statistics -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-start justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="progressStat" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="progressStat">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-2 gap-3">
+          <h6 class="mb-0">Subscribers Gained</h6>
+          <div class="badge bg-label-success">+92k</div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center gap-3">
+          <p class="mb-0">1.2k new subscriber</p>
+          <small class="text-body-secondary">85%</small>
+        </div>
+        <div class="d-flex align-items-center mt-1">
+          <div class="progress w-100" style="height: 8px;">
+            <div class="progress-bar bg-primary" style="width: 85%" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mt-6 mb-2 gap-3">
+          <h6 class="mb-0">Orders Received</h6>
+          <div class="badge bg-label-success">+38k</div>
+        </div>
+        <div class="d-flex justify-content-between align-items-center gap-3">
+          <p class="mb-0">2.4k new orders</p>
+          <small class="text-body-secondary">65%</small>
+        </div>
+        <div class="d-flex align-items-center mt-1">
+          <div class="progress w-100" style="height: 8px;">
+            <div class="progress-bar bg-info" style="width: 65%" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Total Profit -->
+  <div class="col-lg-2 col-6 mb-lg-0">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="badge p-2 bg-label-danger mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
+        <h5 class="card-title mb-1">Total Profit</h5>
+        <p class="card-subtitle ">Last week</p>
+        <p class="text-heading mb-3 mt-1">1.28k</p>
+        <div>
+          <span class="badge bg-label-danger">-12.2%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Total Sales -->
+  <div class="col-lg-2 col-6 mb-lg-0">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="badge p-2 bg-label-success mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
+        <h5 class="card-title mb-1">Total Sales</h5>
+        <p class="card-subtitle ">Last week</p>
+        <p class="text-heading mb-3 mt-1">$4,673</p>
+        <div>
+          <span class="badge bg-label-success">+25.2%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Revenue Growth -->
+  <div class="col-xxl-4 col-xl-5 col-md-6 col-sm-8 col-12 mb-md-0 order-xxl-0 order-2">
+    <div class="card pb-xxl-3">
+      <div class="card-body row">
+        <div class="d-flex flex-column col-4">
+          <div class="card-title mb-auto">
+            <h5 class="mb-2 text-nowrap">Revenue Growth</h5>
+            <p class="mb-0">Weekly Report</p>
+          </div>
+          <div class="chart-statistics">
+            <h3 class="card-title mb-1">$4,673</h3>
+            <span class="badge bg-label-success">+15.2%</span>
+          </div>
+        </div>
+        <div id="revenueGrowth" class="col-8"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Generated Leads -->
+  <div class="col-lg-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-body d-flex justify-content-between">
+        <div class="d-flex flex-column">
+          <div class="card-title mb-auto">
+            <h5 class="mb-0 text-nowrap">Generated Leads</h5>
+            <p class="mb-0">Monthly Report</p>
+          </div>
+          <div class="chart-statistics">
+            <h3 class="card-title mb-0">4,350</h3>
+            <p class="text-success text-nowrap mb-0"><i class="icon-base ti tabler-chevron-up me-1"></i> 15.8%</p>
+          </div>
+        </div>
+        <div id="generatedLeadsChart"></div>
+      </div>
+    </div>
+  </div>
+  <!--/ Cards with charts & info -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Charts/Apex.cshtml

@@ -0,0 +1,294 @@
+@{
+  ViewData["Title"] = "Apex Charts - Charts";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+}
+@section PageScripts {
+<script src="~/js/charts-apex.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row gy-6">
+  <!-- Line Area Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Last updates</h5>
+          <p class="card-subtitle my-0">Commercial networks</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineAreaChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-md-center align-items-start">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="barChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">New Technologies Data</h5>
+        <div class="btn-group d-none d-sm-flex" role="group" aria-label="radio toggle button group">
+          <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+          <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+          <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+          <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="scatterChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+
+  <!-- Line Chart -->
+  <div class="col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Balance</h5>
+          <p class="card-subtitle  my-0">Commercial networks & enterprises</p>
+        </div>
+        <div class="d-sm-flex d-none align-items-center">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="lineChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Chart -->
+
+  <!-- Bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <div>
+          <p class="card-subtitle text-body-secondary mb-1">Balance</p>
+          <h5 class="card-title mb-0">$74,382.72</h5>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="horizontalBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Chart -->
+
+  <!-- Candlestick Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Stocks Prices</h5>
+          <p class="card-subtitle my-0">$50,863.98</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="candleStickChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Candlestick Chart -->
+
+  <!-- Heat map Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Daily Sales States</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="heatMapChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Heat map Chart -->
+
+  <!-- Radial bar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radialBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radial bar Chart -->
+
+  <!-- Radar Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title mb-0">Mobile Comparison</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="heatChartDd1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd1">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="radarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Donut Chart -->
+  <div class="col-md-6 col-12">
+    <div class="card">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div>
+          <h5 class="card-title mb-0">Expense Ratio</h5>
+          <p class="card-subtitle my-0">Spending on various categories</p>
+        </div>
+        <div class="dropdown">
+          <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-calendar"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+            <li>
+              <hr class="dropdown-divider" />
+            </li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+            <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="donutChart"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Donut Chart -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Charts/Chartjs.cshtml

@@ -0,0 +1,254 @@
+@{
+  ViewData["Title"] = "Chart JS - Charts";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/chartjs/chartjs.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/chartjs/chartjs.js"></script>
+}
+@section PageScripts {
+<script src="~/js/charts-chartjs-legend.js"></script>
+<script src="~/js/charts-chartjs.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row">
+  <!-- Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Latest Statistics</h5>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="barChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bar Charts -->
+
+  <!-- Horizontal Bar Charts -->
+  <div class="col-xl-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div class="d-flex flex-column">
+          <p class="card-subtitle text-body-secondary mb-1 mt-0">Balance</p>
+          <h5 class="card-title mb-0">$74,123</h5>
+        </div>
+        <div class="card-action-element ms-auto py-0">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle px-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="horizontalBarChart" class="chartjs" data-height="400"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Horizontal Bar Charts -->
+
+  <!-- Line Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <div>
+          <h5 class="card-title mb-0">Statistics</h5>
+          <p class="text-body-secondary">Commercial networks and enterprises</p>
+        </div>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 78,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-up icon-xs text-success"></i>
+            <span class="align-middle">37%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer" class="custom-legend"></div>
+        <div>
+          <canvas id="lineChart" class="chartjs" data-height="500"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Charts -->
+
+  <!-- Radar Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="card-title mb-0">Radar Chart</h5>
+      </div>
+      <div class="card-body pt-2">
+        <canvas class="chartjs" id="radarChart" data-height="355"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Radar Chart -->
+
+  <!-- Polar Area Chart -->
+  <div class="col-lg-6 col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Average Skills</h5>
+        <div class="card-header-elements ms-auto py-0 dropdown">
+          <button type="button" class="btn dropdown-toggle hide-arrow p-0" id="heat-chart-dd" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-lg"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heat-chart-dd">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="polarChart" class="chartjs" data-height="337"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Polar Area Chart -->
+
+  <!-- Bubble Chart -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Bubble Chart</h5>
+        <div class="card-header-elements ms-auto py-0">
+          <h5 class="mb-0 me-4">$ 100,000</h5>
+          <span class="badge bg-label-secondary">
+            <i class="icon-base ti tabler-arrow-down icon-xs text-danger"></i>
+            <span class="align-middle">20%</span>
+          </span>
+        </div>
+      </div>
+      <div class="card-body">
+        <canvas id="bubbleChart" class="chartjs" data-height="500"></canvas>
+      </div>
+    </div>
+  </div>
+  <!-- /Bubble Chart -->
+
+  <!-- Line Area Charts -->
+  <div class="col-12 mb-6">
+    <div class="card">
+      <div class="card-header header-elements">
+        <h5 class="card-title mb-0">Data Science</h5>
+        <div class="card-header-elements py-0 ms-auto">
+          <div class="dropdown">
+            <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="icon-base ti tabler-calendar"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
+              <li>
+                <hr class="dropdown-divider" />
+              </li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
+              <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer1" class="custom-legend"></div>
+        <div>
+          <canvas id="lineAreaChart" class="chartjs" data-height="450"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Line Area Charts -->
+
+  <!-- Doughnut Chart -->
+  <div class="col-lg-4 col-12 mb-6">
+    <div class="card">
+      <h5 class="card-header">User by Devices</h5>
+      <div class="card-body">
+        <canvas id="doughnutChart" class="chartjs mb-6" data-height="350"></canvas>
+        <ul class="doughnut-legend d-flex justify-content-around ps-0 mb-2 pt-1">
+          <li class="ct-series-0 d-flex flex-column">
+            <h5 class="mb-0">Desktop</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(102, 110, 232);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">80 %</div>
+          </li>
+          <li class="ct-series-1 d-flex flex-column">
+            <h5 class="mb-0">Tablet</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(40, 208, 148);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+          <li class="ct-series-2 d-flex flex-column">
+            <h5 class="mb-0">Mobile</h5>
+            <span class="badge badge-dot my-2 cursor-pointer rounded-pill" style="background-color: rgb(253, 172, 52);width:35px; height:6px;"></span>
+            <div class="text-body-secondary">10 %</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- /Doughnut Chart -->
+
+  <!-- Scatter Chart -->
+  <div class="col-lg-8 col-12 mb-6">
+    <div class="card">
+      <div class="card-header flex-nowrap header-elements">
+        <h5 class="card-title mb-0">New Product Data</h5>
+        <div class="card-header-elements ms-auto py-0 d-none d-sm-block">
+          <div class="btn-group" role="group" aria-label="radio toggle button group">
+            <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
+            <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
+            <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>
+
+            <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
+            <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pt-2">
+        <div id="legendContainer2" class="custom-legend"></div>
+        <div>
+          <canvas id="scatterChart" class="chartjs" data-height="435"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Scatter Chart -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Dashboards/CRM.cshtml

@@ -0,0 +1,735 @@
+@{
+  ViewData["Title"] = "Dashboard - CRM";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+<link rel="stylesheet" href="~/vendor/fonts/flag-icons.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+}
+@section PageScripts {
+<script src="~/js/dashboards-crm.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Sales last year -->
+  <div class="col-xxl-2 col-md-3 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-3">
+        <h5 class="card-title mb-1">Order</h5>
+        <p class="card-subtitle">Last week</p>
+      </div>
+      <div class="card-body">
+        <div id="ordersLastWeek"></div>
+        <div class="d-flex justify-content-between align-items-center gap-3">
+          <h4 class="mb-0">124k</h4>
+          <small class="text-success">+12.6%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sessions Last month -->
+  <div class="col-xxl-2 col-md-3 col-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="card-title mb-1">Sales</h5>
+        <p class="card-subtitle">Last Year</p>
+      </div>
+      <div id="salesLastYear"></div>
+      <div class="card-body pt-0">
+        <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+          <h4 class="mb-0">175k</h4>
+          <small class="text-danger">-16.2%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Total Profit -->
+  <div class="col-xxl-2 col-md-3 col-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="badge p-2 bg-label-danger mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
+        <h5 class="card-title mb-1">Total Profit</h5>
+        <p class="card-subtitle ">Last week</p>
+        <p class="text-heading mb-3 mt-1">1.28k</p>
+        <div>
+          <span class="badge bg-label-danger">-12.2%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Total Sales -->
+  <div class="col-xxl-2 col-md-3 col-6">
+    <div class="card h-100">
+      <div class="card-body">
+        <div class="badge p-2 bg-label-success mb-3 rounded"><i class="icon-base ti tabler-credit-card icon-28px"></i></div>
+        <h5 class="card-title mb-1">Total Sales</h5>
+        <p class="card-subtitle ">Last week</p>
+        <p class="text-heading mb-3 mt-1">24.67k</p>
+        <div>
+          <span class="badge bg-label-success">+24.5%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Revenue Growth -->
+  <div class="col-xxl-4 col-xl-5 col-md-6 col-sm-8 col-12 mb-md-0 order-xxl-0 order-2">
+    <div class="card pb-xxl-3">
+      <div class="card-body row">
+        <div class="d-flex flex-column col-4">
+          <div class="card-title mb-auto">
+            <h5 class="mb-2 text-nowrap">Revenue Growth</h5>
+            <p class="mb-0">Weekly Report</p>
+          </div>
+          <div class="chart-statistics">
+            <h3 class="card-title mb-1">$4,673</h3>
+            <span class="badge bg-label-success">+15.2%</span>
+          </div>
+        </div>
+        <div id="revenueGrowth" class="col-8"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Earning Reports Tabs-->
+  <div class="col-xxl-8 col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title m-0">
+          <h5 class="mb-1">Earning Reports</h5>
+          <p class="card-subtitle">Yearly Earnings Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsTabsId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReportsTabsId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="nav nav-tabs widget-nav-tabs pb-8 gap-4 mx-1 d-flex flex-nowrap" role="tablist">
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn active d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-orders-id" aria-controls="navs-orders-id" aria-selected="true">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-shopping-cart icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Orders</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-sales-id" aria-controls="navs-sales-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-bar-popular icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Sales</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-profit-id" aria-controls="navs-profit-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Profit</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex flex-column align-items-center justify-content-center" role="tab" data-bs-toggle="tab" data-bs-target="#navs-income-id" aria-controls="navs-income-id" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-chart-pie-2 icon-md"></i></div>
+              <h6 class="tab-widget-title mb-0 mt-2">Income</h6>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="javascript:void(0);" class="nav-link btn d-flex align-items-center justify-content-center disabled" role="tab" data-bs-toggle="tab" aria-selected="false">
+              <div class="badge bg-label-secondary rounded p-2"><i class="icon-base ti tabler-plus icon-md"></i></div>
+            </a>
+          </li>
+        </ul>
+        <div class="tab-content p-0 ms-0 ms-sm-2">
+          <div class="tab-pane fade show active" id="navs-orders-id" role="tabpanel">
+            <div id="earningReportsTabsOrders"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-sales-id" role="tabpanel">
+            <div id="earningReportsTabsSales"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-profit-id" role="tabpanel">
+            <div id="earningReportsTabsProfit"></div>
+          </div>
+          <div class="tab-pane fade" id="navs-income-id" role="tabpanel">
+            <div id="earningReportsTabsIncome"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sales last 6 months -->
+  <div class="col-xl-4 col-md-6 order-xxl-0 order-1">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between pb-4">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Sales</h5>
+          <p class="card-subtitle">Last 6 Months</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="salesLastMonthMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesLastMonthMenu">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="salesLastMonth"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Sales By Country -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Sales by Countries</h5>
+          <p class="card-subtitle">Monthly Sales Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="salesByCountry" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesByCountry">
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-us rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$8,567k</h6>
+                </div>
+                <small class="text-body">United states</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  25.8%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-br rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$2,415k</h6>
+                </div>
+                <small class="text-body">Brazil</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  6.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-in rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$865k</h6>
+                </div>
+                <small class="text-body">India</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  12.4%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-au rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$745k</h6>
+                </div>
+                <small class="text-body">Australia</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  11.9%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-fr rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$45</h6>
+                </div>
+                <small class="text-body">France</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  16.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-cn rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$12k</h6>
+                </div>
+                <small class="text-body">China</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  14.8%
+                </p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales By Country -->
+
+  <!-- Project Status -->
+  <div class="col-12 col-md-6 col-xxl-4">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="mb-0 card-title">Project Status</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="projectStatusId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="projectStatusId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="d-flex align-items-start">
+          <div class="badge rounded bg-label-warning p-2 me-3 rounded"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">$4,3742</h6>
+              <small class="text-body">Your Earnings</small>
+            </div>
+            <h6 class="mb-0 text-success">+10.2%</h6>
+          </div>
+        </div>
+        <div id="projectStatusChart"></div>
+        <div class="d-flex justify-content-between mb-4">
+          <h6 class="mb-0">Donates</h6>
+          <div class="d-flex">
+            <p class="mb-0 me-4">$756.26</p>
+            <p class="mb-0 text-danger">-139.34</p>
+          </div>
+        </div>
+        <div class="d-flex justify-content-between">
+          <h6 class="mb-0">Podcasts</h6>
+          <div class="d-flex">
+            <p class="mb-0 me-4">$2,207.03</p>
+            <p class="mb-0 text-success">+576.24</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Active Projects -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Active Project</h5>
+          <p class="card-subtitle">Average 72% Completed</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="activeProjects" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="activeProjects">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/laravel-logo.png" alt="laravel-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Laravel</h6>
+                <small class="text-body">eCommerce</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">65%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/figma-logo.png" alt="figma-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Figma</h6>
+                <small class="text-body">App UI Kit</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-primary" role="progressbar" style="width: 86%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">86%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/vue-logo.png" alt="vue-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">VueJs</h6>
+                <small class="text-body">Calendar App</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">90%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/react-logo.png" alt="react-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">React</h6>
+                <small class="text-body">Dashboard</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">37%</span>
+            </div>
+          </li>
+          <li class="mb-4 d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/bootstrap-logo.png" alt="bootstrap-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Bootstrap</h6>
+                <small class="text-body">Website</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-primary" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">22%</span>
+            </div>
+          </li>
+          <li class="d-flex">
+            <div class="d-flex w-50 align-items-center me-4">
+              <img src="~/img/icons/brands/sketch-logo.png" alt="sketch-logo" class="me-4" width="35" />
+              <div>
+                <h6 class="mb-0">Sketch</h6>
+                <small class="text-body">Website Design</small>
+              </div>
+            </div>
+            <div class="d-flex flex-grow-1 align-items-center">
+              <div class="progress w-100 me-4" style="height:8px;">
+                <div class="progress-bar bg-warning" role="progressbar" style="width: 29%" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+              <span class="text-body-secondary">29%</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Active Projects -->
+
+  <!-- Last Transaction -->
+  <div class="col-md-6 col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="card-title m-0 me-2">Last Transaction</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="teamMemberList" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="teamMemberList">
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-borderless border-top">
+          <thead class="border-bottom">
+            <tr>
+              <th>CARD</th>
+              <th>DATE</th>
+              <th>STATUS</th>
+              <th>TREND</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="pt-5">
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="~/img/icons/payments/visa-img.png" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*4230</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td class="pt-5">
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">17 Mar 2022</small>
+                </div>
+              </td>
+              <td class="pt-5"><span class="badge bg-label-success">Verified</span></td>
+              <td class="pt-5">
+                <p class="mb-0 text-heading">+$1,678</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="~/img/icons/payments/master-card-img.png" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5578</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">12 Feb 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-danger">Rejected</span></td>
+              <td>
+                <p class="mb-0 text-heading">-$839</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="~/img/icons/payments/american-express-img.png" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*4567</p>
+                    <small class="text-body">ATM</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">28 Feb 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-success">Verified</span></td>
+              <td>
+                <p class="mb-0 text-heading">+$435</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="~/img/icons/payments/visa-img.png" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5699</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">8 Jan 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-secondary">Pending</span></td>
+              <td>
+                <p class="mb-0 text-heading">+$2,345</p>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div class="d-flex justify-content-start align-items-center">
+                  <div class="me-4">
+                    <img src="~/img/icons/payments/visa-img.png" alt="Visa" height="30" />
+                  </div>
+                  <div class="d-flex flex-column">
+                    <p class="mb-0 text-heading">*5699</p>
+                    <small class="text-body">Credit</small>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div class="d-flex flex-column">
+                  <p class="mb-0 text-heading">Sent</p>
+                  <small class="text-body text-nowrap">8 Jan 2022</small>
+                </div>
+              </td>
+              <td><span class="badge bg-label-danger">Rejected</span></td>
+              <td>
+                <p class="mb-0 text-heading">-$234</p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!--/ Last Transaction -->
+
+  <!-- Activity Timeline -->
+  <div class="col-xxl-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title m-0 me-2 pt-1 mb-2 d-flex align-items-center"><i class="icon-base ti tabler-list-details me-3"></i> Activity Timeline</h5>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="timelineWapper" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pb-xxl-0">
+        <ul class="timeline mb-0">
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">12 Invoices have been paid</h6>
+                <small class="text-body-secondary">12 min ago</small>
+              </div>
+              <p class="mb-2">Invoices have been paid to the company</p>
+              <div class="d-flex align-items-center mb-1">
+                <div class="badge bg-lighter rounded-3">
+                  <img src="~/img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
+                  <span class="h6 mb-0 text-body">invoices.pdf</span>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-success"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">Client Meeting</h6>
+                <small class="text-body-secondary">45 min ago</small>
+              </div>
+              <p class="mb-2">Project meeting with john &#64;10:15am</p>
+              <div class="d-flex justify-content-between flex-wrap gap-2">
+                <div class="d-flex flex-wrap align-items-center">
+                  <div class="avatar avatar-sm me-2">
+                    <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                  </div>
+                  <div>
+                    <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
+                    <small>CEO of @TempData.Peek("authorName")</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent">
+            <span class="timeline-point timeline-point-info"></span>
+            <div class="timeline-event">
+              <div class="timeline-header mb-3">
+                <h6 class="mb-0">Create a new project for client</h6>
+                <small class="text-body-secondary">2 Day Ago</small>
+              </div>
+              <p class="mb-2">6 team members in a project</p>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0">
+                  <div class="d-flex flex-wrap align-items-center">
+                    <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
+                        <img class="rounded-circle" src="~/img/avatars/5.png" alt="Avatar" />
+                      </li>
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
+                        <img class="rounded-circle" src="~/img/avatars/12.png" alt="Avatar" />
+                      </li>
+                      <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
+                        <img class="rounded-circle" src="~/img/avatars/6.png" alt="Avatar" />
+                      </li>
+                      <li class="avatar">
+                        <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Activity Timeline -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Dashboards/Index.cshtml

@@ -0,0 +1,764 @@
+@{
+  ViewData["Title"] = "Dashboard - Analytics";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+<link rel="stylesheet" href="~/vendor/libs/swiper/swiper.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css">
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css">
+<link rel="stylesheet" href="~/vendor/fonts/flag-icons.css">
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+<script src="~/vendor/libs/swiper/swiper.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/cards-advance.css" />
+}
+
+@section PageScripts {
+<script src="~/js/dashboards-analytics.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Website Analytics -->
+  <div class="col-xl-6 col">
+    <div class="swiper-container swiper-container-horizontal swiper swiper-card-advance-bg" id="swiper-with-pagination-cards">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="row">
+              <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+                <h6 class="text-white mt-0 mt-md-3 mb-4">Traffic</h6>
+                <div class="row">
+                  <div class="col-6">
+                    <ul class="list-unstyled mb-0">
+                      <li class="d-flex mb-4 align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">28%</p>
+                        <p class="mb-0">Sessions</p>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">1.2k</p>
+                        <p class="mb-0">Leads</p>
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="col-6">
+                    <ul class="list-unstyled mb-0">
+                      <li class="d-flex mb-4 align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">3.1k</p>
+                        <p class="mb-0">Page Views</p>
+                      </li>
+                      <li class="d-flex align-items-center">
+                        <p class="mb-0 fw-medium me-2 website-analytics-text-bg">12%</p>
+                        <p class="mb-0">Conversions</p>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+                <img src="~/img/illustrations/card-website-analytics-1.png" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+              <h6 class="text-white mt-0 mt-md-3 mb-4">Spending</h6>
+              <div class="row">
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">12h</p>
+                      <p class="mb-0">Spend</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">127</p>
+                      <p class="mb-0">Order</p>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">18</p>
+                      <p class="mb-0">Order Size</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">2.3k</p>
+                      <p class="mb-0">Items</p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+              <img src="~/img/illustrations/card-website-analytics-2.png" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+            </div>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="row">
+            <div class="col-12">
+              <h5 class="text-white mb-0">Website Analytics</h5>
+              <small>Total 28.5% Conversion Rate</small>
+            </div>
+            <div class="col-lg-7 col-md-9 col-12 order-2 order-md-1 pt-md-9">
+              <h6 class="text-white mt-0 mt-md-3 mb-4">Revenue Sources</h6>
+              <div class="row">
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">268</p>
+                      <p class="mb-0">Direct</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">62</p>
+                      <p class="mb-0">Referral</p>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-6">
+                  <ul class="list-unstyled mb-0">
+                    <li class="d-flex mb-4 align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">890</p>
+                      <p class="mb-0">Organic</p>
+                    </li>
+                    <li class="d-flex align-items-center">
+                      <p class="mb-0 fw-medium me-2 website-analytics-text-bg">1.2k</p>
+                      <p class="mb-0">Campaign</p>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-5 col-md-3 col-12 order-1 order-md-2 my-4 my-md-0 text-center">
+              <img src="~/img/illustrations/card-website-analytics-3.png" alt="Website Analytics" height="150" class="card-website-analytics-img" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+  </div>
+  <!--/ Website Analytics -->
+
+  <!-- Average Daily Sales -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header pb-0">
+        <h5 class="mb-3 card-title">Average Daily Sales</h5>
+        <p class="mb-0 text-body">Total Sales This Month</p>
+        <h4 class="mb-0">$28,450</h4>
+      </div>
+      <div class="card-body px-0">
+        <div id="averageDailySales"></div>
+      </div>
+    </div>
+  </div>
+  <!--/ Average Daily Sales -->
+
+  <!-- Sales Overview -->
+  <div class="col-xl-3 col-sm-6">
+    <div class="card h-100">
+      <div class="card-header">
+        <div class="d-flex justify-content-between">
+          <p class="mb-0 text-body">Sales Overview</p>
+          <p class="card-text fw-medium text-success">+18.2%</p>
+        </div>
+        <h4 class="card-title mb-1">$42.5k</h4>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-4">
+            <div class="d-flex gap-2 align-items-center mb-2">
+              <span class="badge bg-label-info p-1 rounded"><i class="icon-base ti tabler-shopping-cart icon-sm"></i></span>
+              <p class="mb-0">Order</p>
+            </div>
+            <h5 class="mb-0 pt-1">62.2%</h5>
+            <small class="text-body-secondary">6,440</small>
+          </div>
+          <div class="col-4">
+            <div class="divider divider-vertical">
+              <div class="divider-text">
+                <span class="badge-divider-bg bg-label-secondary">VS</span>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 text-end">
+            <div class="d-flex gap-2 justify-content-end align-items-center mb-2">
+              <p class="mb-0">Visits</p>
+              <span class="badge bg-label-primary p-1 rounded"><i class="icon-base ti tabler-link icon-sm"></i></span>
+            </div>
+            <h5 class="mb-0 pt-1">25.5%</h5>
+            <small class="text-body-secondary">12,749</small>
+          </div>
+        </div>
+        <div class="d-flex align-items-center mt-6">
+          <div class="progress w-100" style="height: 10px;">
+            <div class="progress-bar bg-info" style="width: 70%" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+            <div class="progress-bar bg-primary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales Overview -->
+
+  <!-- Earning Reports -->
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-header pb-0 d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Earning Reports</h5>
+          <p class="card-subtitle">Weekly Earnings Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReportsId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReportsId">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="row align-items-center g-md-8">
+          <div class="col-12 col-md-5 d-flex flex-column">
+            <div class="d-flex gap-2 align-items-center mb-3 flex-wrap">
+              <h2 class="mb-0">$468</h2>
+              <div class="badge rounded bg-label-success">+4.2%</div>
+            </div>
+            <small class="text-body">You informed of this week compared to last week</small>
+          </div>
+          <div class="col-12 col-md-7 ps-xl-8">
+            <div id="weeklyEarningReports"></div>
+          </div>
+        </div>
+        <div class="border rounded p-5 mt-5">
+          <div class="row gap-4 gap-sm-0">
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-primary p-1"><i class="icon-base ti tabler-currency-dollar icon-18px"></i></div>
+                <h6 class="mb-0 fw-normal">Earnings</h6>
+              </div>
+              <h4 class="my-2">$545.69</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-info p-1"><i class="icon-base ti tabler-chart-pie-2 icon-18px"></i></div>
+                <h6 class="mb-0 fw-normal">Profit</h6>
+              </div>
+              <h4 class="my-2">$256.34</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+            <div class="col-12 col-sm-4">
+              <div class="d-flex gap-2 align-items-center">
+                <div class="badge rounded bg-label-danger p-1"><i class="icon-base ti tabler-brand-paypal icon-18px"></i></div>
+                <h6 class="mb-0 fw-normal">Expense</h6>
+              </div>
+              <h4 class="my-2">$74.19</h4>
+              <div class="progress w-75" style="height:4px">
+                <div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Earning Reports -->
+
+  <!-- Support Tracker -->
+  <div class="col-12 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Support Tracker</h5>
+          <p class="card-subtitle">Last 7 Days</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="supportTrackerMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="supportTrackerMenu">
+            <a class="dropdown-item" href="javascript:void(0);">View More</a>
+            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body row">
+        <div class="col-12 col-sm-4">
+          <div class="mt-lg-4 mt-lg-2 mb-lg-6 mb-2">
+            <h2 class="mb-0">164</h2>
+            <p class="mb-0">Total Tickets</p>
+          </div>
+          <ul class="p-0 m-0">
+            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
+              <div class="badge rounded bg-label-primary p-1_5"><i class="icon-base ti tabler-ticket icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">New Tickets</h6>
+                <small class="text-body-secondary">142</small>
+              </div>
+            </li>
+            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
+              <div class="badge rounded bg-label-info p-1_5"><i class="icon-base ti tabler-circle-check icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">Open Tickets</h6>
+                <small class="text-body-secondary">28</small>
+              </div>
+            </li>
+            <li class="d-flex gap-4 align-items-center pb-1">
+              <div class="badge rounded bg-label-warning p-1_5"><i class="icon-base ti tabler-clock icon-md"></i></div>
+              <div>
+                <h6 class="mb-0 text-nowrap">Response Time</h6>
+                <small class="text-body-secondary">1 Day</small>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="col-12 col-md-8">
+          <div id="supportTracker"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Support Tracker -->
+
+  <!-- Sales By Country -->
+  <div class="col-xxl-4 col-md-6 order-1 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Sales by Countries</h5>
+          <p class="card-subtitle">Monthly Sales Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary btn-icon rounded-pill text-body-secondary border-0 me-n1" type="button" id="salesByCountry" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-22px text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesByCountry">
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-us rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$8,567k</h6>
+                </div>
+                <small class="text-body">United states</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  25.8%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-br rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$2,415k</h6>
+                </div>
+                <small class="text-body">Brazil</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  6.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-in rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$865k</h6>
+                </div>
+                <small class="text-body">India</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  12.4%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-au rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$745k</h6>
+                </div>
+                <small class="text-body">Australia</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-danger fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-down"></i>
+                  11.9%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-4">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-fr rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$45</h6>
+                </div>
+                <small class="text-body">France</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  16.2%
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="avatar flex-shrink-0 me-4">
+              <i class="fis fi fi-cn rounded-circle fs-2"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <div class="d-flex align-items-center">
+                  <h6 class="mb-0 me-1">$12k</h6>
+                </div>
+                <small class="text-body">China</small>
+              </div>
+              <div class="user-progress">
+                <p class="text-success fw-medium mb-0 d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up"></i>
+                  14.8%
+                </p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales By Country -->
+
+  <!-- Total Earning -->
+  <div class="col-12 col-md-6 col-xxl-4 order-2 order-xl-0">
+    <div class="card h-100">
+      <div class="card-header">
+        <div class="d-flex justify-content-between align-items-center">
+          <h5 class="mb-0 card-title">Total Earning</h5>
+          <div class="dropdown">
+            <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="totalEarning" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+            </button>
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalEarning">
+              <a class="dropdown-item" href="javascript:void(0);">View More</a>
+              <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex align-items-center">
+          <h2 class="mb-0 me-2">87%</h2>
+          <i class="icon-base ti tabler-chevron-up text-success me-1"></i>
+          <h6 class="text-success mb-0">25.8%</h6>
+        </div>
+      </div>
+      <div class="card-body">
+        <div id="totalEarningChart"></div>
+        <div class="d-flex align-items-start my-4">
+          <div class="badge rounded bg-label-primary p-2 me-4 rounded"><i class="icon-base ti tabler-brand-paypal icon-md"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">Total Revenue</h6>
+              <small class="text-body">Client Payment</small>
+            </div>
+            <h6 class="mb-0 text-success">+$126</h6>
+          </div>
+        </div>
+        <div class="d-flex align-items-start">
+          <div class="badge rounded bg-label-secondary p-2 me-4 rounded"><i class="icon-base ti tabler-currency-dollar icon-md"></i></div>
+          <div class="d-flex justify-content-between w-100 gap-2 align-items-center">
+            <div class="me-2">
+              <h6 class="mb-0">Total Sales</h6>
+              <small class="text-body">Refund</small>
+            </div>
+            <h6 class="mb-0 text-success">+$98</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Total Earning -->
+
+  <!-- Monthly Campaign State -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Monthly Campaign State</h5>
+          <p class="card-subtitle">8.52k Social Visiters</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="MonthlyCampaign" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="MonthlyCampaign">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-success rounded p-1_5"><i class="icon-base ti tabler-mail icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Emails</h6>
+              <div class="d-flex">
+                <p class="mb-0">12,346</p>
+                <p class="ms-4 text-success mb-0">0.3%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-info rounded p-1_5"><i class="icon-base ti tabler-link icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Opened</h6>
+              <div class="d-flex">
+                <p class="mb-0">8,734</p>
+                <p class="ms-4 text-success mb-0">2.1%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-warning rounded p-1_5"><i class="icon-base ti tabler-mouse icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Clicked</h6>
+              <div class="d-flex">
+                <p class="mb-0">967</p>
+                <p class="ms-4 text-danger mb-0">1.4%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-primary rounded p-1_5"><i class="icon-base ti tabler-users icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Subscribe</h6>
+              <div class="d-flex">
+                <p class="mb-0">345</p>
+                <p class="ms-4 text-success mb-0">8.5%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-secondary rounded p-1_5"><i class="icon-base ti tabler-alert-triangle icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Complaints</h6>
+              <div class="d-flex">
+                <p class="mb-0">10</p>
+                <p class="ms-4 text-danger mb-0">1.5%</p>
+              </div>
+            </div>
+          </li>
+          <li class="mb-3 d-flex justify-content-between align-items-center">
+            <div class="badge bg-label-danger rounded p-1_5"><i class="icon-base ti tabler-ban icon-md"></i></div>
+            <div class="d-flex justify-content-between w-100 flex-wrap">
+              <h6 class="mb-0 ms-4">Unsubscribe</h6>
+              <div class="d-flex">
+                <p class="mb-0">86</p>
+                <p class="ms-4 text-success mb-0">0.8%</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Monthly Campaign State -->
+
+  <!-- Source Visit -->
+  <div class="col-xxl-4 col-md-6 col-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Source Visits</h5>
+          <p class="card-subtitle">38.4k Visitors</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="sourceVisits" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="sourceVisits">
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">View All</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="list-unstyled mb-0">
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-shadow icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Direct Source</h6>
+                  <small class="text-body">Direct link click</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">1.2k</p>
+                  <div class="ms-4 badge bg-label-success">+4.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-globe icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Social Network</h6>
+                  <small class="text-body">Social Channels</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">31.5k</p>
+                  <div class="ms-4 badge bg-label-success">+8.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-mail icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Email Newsletter</h6>
+                  <small class="text-body">Mail Campaigns</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">893</p>
+                  <div class="ms-4 badge bg-label-success">+2.4%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-external-link icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Referrals</h6>
+                  <small class="text-body">Impact Radius Visits</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">342</p>
+                  <div class="ms-4 badge bg-label-danger">-0.4%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-6">
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-ad icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">ADVT</h6>
+                  <small class="text-body">Google ADVT</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">2.15k</p>
+                  <div class="ms-4 badge bg-label-success">+9.1%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="d-flex align-items-center">
+              <div class="badge bg-label-secondary text-body p-2 me-4 rounded"><i class="icon-base ti tabler-star icon-md"></i></div>
+              <div class="d-flex justify-content-between w-100 flex-wrap gap-2">
+                <div class="me-2">
+                  <h6 class="mb-0">Other</h6>
+                  <small class="text-body">Many Sources</small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <p class="mb-0">12.5k</p>
+                  <div class="ms-4 badge bg-label-success">+6.2%</div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Source Visit -->
+
+  <!-- Projects table -->
+  <div class="col-xxl-8">
+    <div class="card">
+      <div class="table-responsive mb-4">
+        <table class="table datatable-project table-sm">
+          <thead class="border-top">
+            <tr>
+              <th></th>
+              <th></th>
+              <th>Project</th>
+              <th>Leader</th>
+              <th>Team</th>
+              <th class="w-px-200">Progress</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!--/ Projects table -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/CustomerAll.cshtml

@@ -0,0 +1,140 @@
+@{
+  ViewData["Title"] = "eCommerce Customer All - Apps";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/fonts/flag-icons.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-customer-all.js"></script>
+}
+
+@* ************** Content ************** *@
+<!-- customers List Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-customers table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Customer</th>
+          <th class="text-nowrap">Customer Id</th>
+          <th>Country</th>
+          <th>Order</th>
+          <th class="text-nowrap">Total Spent</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+  <!-- Offcanvas to add new customer -->
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCustomerAdd" aria-labelledby="offcanvasEcommerceCustomerAddLabel">
+    <div class="offcanvas-header">
+      <h5 id="offcanvasEcommerceCustomerAddLabel" class="offcanvas-title">Add Customer</h5>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body border-top mx-0 flex-grow-0">
+      <form class="ecommerce-customer-add pt-0" id="eCommerceCustomerAddForm" onsubmit="return false">
+        <div class="ecommerce-customer-add-basic mb-4">
+          <h6 class="mb-6">Basic Information</h6>
+          <div class="mb-6 form-control-validation">
+            <label class="form-label" for="ecommerce-customer-add-name">Name*</label>
+            <input type="text" class="form-control" id="ecommerce-customer-add-name" placeholder="John Doe" name="customerName" aria-label="John Doe" />
+          </div>
+          <div class="mb-6 form-control-validation">
+            <label class="form-label" for="ecommerce-customer-add-email">Email*</label>
+            <input type="text" id="ecommerce-customer-add-email" class="form-control" placeholder="john.doe&#64;example.com" aria-label="john.doe&#64;example.com" name="customerEmail" />
+          </div>
+          <div>
+            <label class="form-label" for="ecommerce-customer-add-contact">Mobile</label>
+            <input type="text" id="ecommerce-customer-add-contact" class="form-control phone-mask" placeholder="+(123) 456-7890" aria-label="+(123) 456-7890" name="customerContact" />
+          </div>
+        </div>
+
+        <div class="ecommerce-customer-add-shiping mb-6 pt-4">
+          <h6 class="mb-6">Shipping Information</h6>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-address">Address Line 1</label>
+            <input type="text" id="ecommerce-customer-add-address" class="form-control" placeholder="45 Roker Terrace" aria-label="45 Roker Terrace" name="customerAddress1" />
+          </div>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-address-2">Address Line 2</label>
+            <input type="text" id="ecommerce-customer-add-address-2" class="form-control" aria-label="address2" name="customerAddress2" />
+          </div>
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-customer-add-town">Town</label>
+            <input type="text" id="ecommerce-customer-add-town" class="form-control" placeholder="New York" aria-label="New York" name="customerTown" />
+          </div>
+          <div class="col-12 mb-6">
+            <label class="form-label" for="ecommerce-customer-add-state">State / Province</label>
+            <input type="text" id="ecommerce-customer-add-state" class="form-control" placeholder="Southern tip" aria-label="Southern tip" name="customerState" />
+          </div>
+          <div class="col-12 mb-6">
+            <label class="form-label" for="ecommerce-customer-add-post-code">Post Code</label>
+            <input type="text" id="ecommerce-customer-add-post-code" class="form-control" placeholder="734990" aria-label="734990" name="pin" pattern="[0-9]{8}" maxlength="8" />
+          </div>
+          <div>
+            <label class="form-label" for="ecommerce-customer-add-country">Country</label>
+            <select id="ecommerce-customer-add-country" class="select2 form-select">
+              <option value="">Select</option>
+              <option value="Australia">Australia</option>
+              <option value="Bangladesh">Bangladesh</option>
+              <option value="Belarus">Belarus</option>
+              <option value="Brazil">Brazil</option>
+              <option value="Canada">Canada</option>
+              <option value="China">China</option>
+              <option value="France">France</option>
+              <option value="Germany">Germany</option>
+              <option value="India">India</option>
+              <option value="Indonesia">Indonesia</option>
+              <option value="Israel">Israel</option>
+              <option value="Italy">Italy</option>
+              <option value="Japan">Japan</option>
+              <option value="Korea">Korea, Republic of</option>
+              <option value="Mexico">Mexico</option>
+              <option value="Philippines">Philippines</option>
+              <option value="Russia">Russian Federation</option>
+              <option value="South Africa">South Africa</option>
+              <option value="Thailand">Thailand</option>
+              <option value="Turkey">Turkey</option>
+              <option value="Ukraine">Ukraine</option>
+              <option value="United Arab Emirates">United Arab Emirates</option>
+              <option value="United Kingdom">United Kingdom</option>
+              <option value="United States">United States</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="d-sm-flex mb-6">
+          <div class="me-auto mb-2 mb-md-0">
+            <h6 class="mb-1">Use as a billing address?</h6>
+            <small class="text-body-secondary">If you need more info, please check budget.</small>
+          </div>
+          <div class="form-check form-switch my-auto me-n2">
+            <input type="checkbox" class="form-check-input" checked />
+          </div>
+        </div>
+        <div>
+          <button type="submit" class="btn btn-primary me-sm-4 data-submit">Add</button>
+          <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/CustomerDetailsBilling.cshtml

@@ -0,0 +1,508 @@
+@{
+  ViewData["Title"] = "Customer Details Address & Billing - eCommerce";
+}
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/fonts/flag-icons.css" />
+<link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+@section PageScripts {
+<script src="~/js/modal-edit-user.js"></script>
+<script src="~/js/modal-edit-cc.js"></script>
+<script src="~/js/modal-add-new-cc.js"></script>
+<script src="~/js/modal-add-new-address.js"></script>
+<script src="~/js/app-ecommerce-customer-detail.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="~/img/avatars/1.png" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot&#64;vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="~/img/illustrations/rocket.png" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsOverview"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsSecurity"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsNotifications"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+
+    <!-- Address accordion -->
+
+    <div class="card card-action mb-6">
+      <div class="card-header align-items-center py-6">
+        <h5 class="card-action-title mb-0">Address Book</h5>
+        <div class="card-action-element">
+          <button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewAddress">Add new address</button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionAddress">
+          <div class="accordion-item border-bottom">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingHome">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressHome" aria-expanded="false" aria-controls="headingHome" role="button">
+                <span>
+                  <span class="d-flex gap-2 align-items-baseline">
+                    <span class="h6 mb-1">Home</span>
+                    <span class="badge bg-label-success">Default Address</span>
+                  </span>
+                  <span class="mb-0">23 Shatinon Mekalan</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressHome" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">23 Shatinon Mekalan,</p>
+                <p class="mb-1">Melbourne, VIC 3000,</p>
+                <p class="mb-1">LondonUK</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-bottom border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingOffice">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressOffice" aria-expanded="false" aria-controls="headingOffice" role="button">
+                <span class="d-flex flex-column">
+                  <span class="h6 mb-0">Office</span>
+                  <span class="mb-0">45 Roker Terrace</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressOffice" class="accordion-collapse collapse" aria-labelledby="headingOffice" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">45 Roker Terrace,</p>
+                <p class="mb-1">Latheronwheel,</p>
+                <p class="mb-1">KW5 8NW</p>
+                <p class="mb-1">LondonUK</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingFamily">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressFamily" aria-expanded="false" aria-controls="headingFamily" role="button">
+                <span class="d-flex flex-column">
+                  <span class="h6 mb-0">Family</span>
+                  <span class="mb-0">512 Water Plant</span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingAddressFamily" class="accordion-collapse collapse" aria-labelledby="headingFamily" data-bs-parent="#ecommerceBillingAccordionAddress">
+              <div class="accordion-body ps-6 ms-1">
+                <h6 class="mb-1">Violet Mendoza</h6>
+                <p class="mb-1">512 Water Plant,</p>
+                <p class="mb-1">Melbourne, NY 10036,</p>
+                <p class="mb-1">New York,</p>
+                <p class="mb-1">United States</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Address accordion -->
+
+    <!-- payment accordion -->
+    <div class="card card-action mb-6">
+      <div class="card-header align-items-center py-6">
+        <h5 class="card-action-title mb-0">Payment Methods</h5>
+        <div class="card-action-element">
+          <button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewCCModal">Add payment methods</button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionPayment">
+          <div class="accordion-item border-bottom">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentMaster">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentMaster" aria-expanded="false" aria-controls="headingPaymentMaster" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="~/img/icons/payments/master-light.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
+                  </span>
+                  <span class="d-flex flex-column">
+                    <span class="h6 mb-1">Mastercard</span>
+                    <span class="mb-0">Expires Apr 2028</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentMaster" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 4487</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">04/2028</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot@vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-bottom border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentExpress">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentExpress" aria-expanded="false" aria-controls="headingPaymentExpress" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="~/img/icons/payments/ae-light.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
+                  </span>
+                  <span>
+                    <span class="d-flex gap-2 row-gap-0 flex-wrap align-items-baseline">
+                      <span class="h6 mb-1 text-nowrap">American Express</span>
+                      <span class="badge bg-label-success mb-2 mb-sm-0">Primary</span>
+                    </span>
+                    <span class="mb-0">45 Roker Terrace</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentExpress" class="accordion-collapse collapse" aria-labelledby="headingPaymentExpress" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 4487</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">08/2028</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot&#64;vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item border-top-0">
+            <div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentVisa">
+              <a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentVisa" aria-expanded="false" aria-controls="headingPaymentVisa" role="button">
+                <span class="accordion-button-information d-flex align-items-center gap-4">
+                  <span class="accordion-button-image">
+                    <img src="~/img/icons/payments/visa-img.png" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
+                  </span>
+                  <span class="d-flex flex-column">
+                    <span class="h6 mb-1">Visa</span>
+                    <span class="mb-0">512 Water Plant</span>
+                  </span>
+                </span>
+              </a>
+              <div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
+                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
+                <a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
+                <button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
+                </ul>
+              </div>
+            </div>
+            <div id="ecommerceBillingPaymentVisa" class="accordion-collapse collapse" aria-labelledby="headingPaymentVisa" data-bs-parent="#ecommerceBillingAccordionPayment">
+              <div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
+                <table class="table table-sm table-borderless text-nowrap small">
+                  <tr>
+                    <td class="w-50">Name</td>
+                    <td class="fw-medium text-heading">Violet Mendoza</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">**** 5155</td>
+                  </tr>
+                  <tr>
+                    <td>Expires</td>
+                    <td class="fw-medium text-heading">02/2022</td>
+                  </tr>
+                  <tr>
+                    <td>Type</td>
+                    <td class="fw-medium text-heading">Visa credit card</td>
+                  </tr>
+                  <tr>
+                    <td>Issuer</td>
+                    <td class="fw-medium text-heading">VICBANK</td>
+                  </tr>
+                  <tr>
+                    <td>ID</td>
+                    <td class="fw-medium text-heading">id_w2r84jdy723</td>
+                  </tr>
+                </table>
+                <table class="table table-sm table-borderless text-nowrap">
+                  <tr>
+                    <td class="w-50">Billing Phone</td>
+                    <td class="fw-medium text-heading">USA</td>
+                  </tr>
+                  <tr>
+                    <td>Number</td>
+                    <td class="fw-medium text-heading">+7634 983 637</td>
+                  </tr>
+                  <tr>
+                    <td>Email</td>
+                    <td class="fw-medium text-heading">vafgot&#64;vultukir.org</td>
+                  </tr>
+                  <tr>
+                    <td>Origin</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
+                  </tr>
+                  <tr>
+                    <td>CVC check</td>
+                    <td class="fw-medium text-heading d-flex align-items-center gap-2">
+                      Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+<!-- Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditUser")
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditCc")
+@await Html.PartialAsync("../_Partials/_Modals/ModalAddNewAddress")
+@await Html.PartialAsync("../_Partials/_Modals/ModalAddNewCc")
+@await Html.PartialAsync("../_Partials/_Modals/ModalUpgradePlan")
+<!-- /Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/CustomerDetailsNotifications.cshtml

@@ -0,0 +1,252 @@
+@{
+  ViewData["Title"] = "Customer Details Notifications - eCommerce";
+}
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+@section PageScripts {
+<script src="~/js/modal-edit-user.js"></script>
+<script src="~/js/app-ecommerce-customer-detail.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="~/img/avatars/1.png" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot&#64;vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1  order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="~/img/illustrations/rocket.png" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsOverview"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsSecurity"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsBilling"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+    <!-- Project table -->
+    <div class="card mb-6">
+      <!-- Notifications -->
+      <div class="card-header">
+        <h5 class="card-title mb-1">Notifications</h5>
+        <span class="text-body">You will receive notification for the below selected items.</span>
+      </div>
+      <div>
+        <div class="table-responsive border-bottom">
+          <table class="table">
+            <thead>
+              <tr>
+                <th class="text-nowrap">Type</th>
+                <th class="text-nowrap text-center">Email</th>
+                <th class="text-nowrap text-center">Browser</th>
+                <th class="text-nowrap text-center">App</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="text-nowrap text-heading">New for you</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="text-nowrap text-heading">Account activity</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="text-nowrap text-heading">A new browser used to sign in</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck9" />
+                  </div>
+                </td>
+              </tr>
+              <tr class="border-transparent">
+                <td class="text-nowrap text-heading">A new device is linked</td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck11" />
+                  </div>
+                </td>
+                <td>
+                  <div class="form-check d-flex justify-content-center mb-0">
+                    <input class="form-check-input" type="checkbox" id="defaultCheck12" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card-body pt-6">
+        <button type="submit" class="btn btn-primary me-3">Save changes</button>
+        <button type="reset" class="btn btn-label-secondary">Discard</button>
+      </div>
+      <!-- /Notifications -->
+    </div>
+    <!-- /Project table -->
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+<!-- Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditUser")
+@await Html.PartialAsync("../_Partials/_Modals/ModalUpgradePlan")
+<!-- /Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/CustomerDetailsOverview.cshtml

@@ -0,0 +1,262 @@
+@{
+  ViewData["Title"] = "Customer Details Overview - eCommerce";
+}
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+@section PageScripts {
+<script src="~/js/modal-edit-user.js"></script>
+<script src="~/js/app-ecommerce-customer-detail.js"></script>
+<script src="~/js/app-ecommerce-customer-detail-overview.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="~/img/avatars/1.png" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot&#64;vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1  order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="~/img/illustrations/rocket.png" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsSecurity"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsBilling"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsNotifications"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+
+    <!-- / Customer cards -->
+    <div class="row text-nowrap">
+      <div class="col-md-6 mb-6">
+        <div class="card h-100">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-primary">
+                  <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Account Balance</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-primary mb-0">$2345</h5>
+                <p class="mb-0">Credit Left</p>
+              </div>
+              <p class="mb-0 text-truncate">Account balance for next purchase</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-success">
+                  <i class="icon-base ti tabler-gift icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Loyalty Program</h5>
+              <span class="badge bg-label-success mb-2">Platinum member</span>
+              <p class="mb-0">3000 points to next tier</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-warning">
+                  <i class="icon-base ti tabler-star icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Wishlist</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-warning mb-0">15</h5>
+                <p class="mb-0">Items in wishlist</p>
+              </div>
+              <p class="mb-0 text-truncate">Receive notification when items go on sale</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 mb-6">
+        <div class="card">
+          <div class="card-body">
+            <div class="card-icon mb-2">
+              <div class="avatar">
+                <div class="avatar-initial rounded bg-label-info">
+                  <i class="icon-base ti tabler-crown icon-lg"></i>
+                </div>
+              </div>
+            </div>
+            <div class="card-info">
+              <h5 class="card-title mb-2">Coupons</h5>
+              <div class="d-flex align-items-baseline gap-1">
+                <h5 class="text-info mb-0">21</h5>
+                <p class="mb-0">Coupons you win</p>
+              </div>
+
+              <p class="mb-0 text-truncate">Use coupon on next purchase</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- / customer cards -->
+
+    <!-- Invoice table -->
+    <div class="card mb-6">
+      <div class="table-responsive mb-4">
+        <table class="table datatables-customer-order">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Order</th>
+              <th>Date</th>
+              <th>Status</th>
+              <th>Spent</th>
+              <th class="text-md-center">Actions</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+    <!-- /Invoice table -->
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+<!-- Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditUser")
+@await Html.PartialAsync("../_Partials/_Modals/ModalUpgradePlan")
+<!-- /Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/CustomerDetailsSecurity.cshtml

@@ -0,0 +1,255 @@
+@{
+  ViewData["Title"] = "Customer Details Security - eCommerce";
+}
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/animate-css/animate.css" />
+<link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+}
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+}
+@section PageScripts {
+<script src="~/js/modal-edit-user.js"></script>
+<script src="~/js/modal-enable-otp.js"></script>
+<script src="~/js/app-ecommerce-customer-detail.js"></script>
+<script src="~/js/app-user-view-security.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
+  <div class="mb-2 mb-sm-0">
+    <h4 class="mb-1">Customer ID #634759</h4>
+    <p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
+  </div>
+  <button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
+</div>
+
+<div class="row">
+  <!-- Customer-detail Sidebar -->
+  <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
+    <!-- Customer-detail Card -->
+    <div class="card mb-6">
+      <div class="card-body pt-12">
+        <div class="customer-avatar-section">
+          <div class="d-flex align-items-center flex-column">
+            <img class="img-fluid rounded mb-4" src="~/img/avatars/1.png" height="120" width="120" alt="User avatar" />
+            <div class="customer-info text-center mb-6">
+              <h5 class="mb-0">Lorine Hischke</h5>
+              <span>Customer ID #634759</span>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
+          <div class="d-flex align-items-center gap-4 me-5">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">184</h5>
+              <span>Orders</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-4">
+            <div class="avatar">
+              <div class="avatar-initial rounded bg-label-primary">
+                <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+              </div>
+            </div>
+            <div>
+              <h5 class="mb-0">$12,378</h5>
+              <span>Spent</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-container">
+          <h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
+          <ul class="list-unstyled mb-6">
+            <li class="mb-2">
+              <span class="h6 me-1">Username:</span>
+              <span>lorine.hischke</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Email:</span>
+              <span>vafgot&#64;vultukir.org</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Status:</span>
+              <span class="badge bg-label-success">Active</span>
+            </li>
+            <li class="mb-2">
+              <span class="h6 me-1">Contact:</span>
+              <span>(123) 456-7890</span>
+            </li>
+
+            <li class="mb-2">
+              <span class="h6 me-1">Country:</span>
+              <span>USA</span>
+            </li>
+          </ul>
+          <div class="d-flex justify-content-center">
+            <a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /Customer-detail Card -->
+    <!-- Plan Card -->
+
+    <div class="card mb-4 bg-gradient-primary">
+      <div class="card-body">
+        <div class="row justify-content-between mb-4">
+          <div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1  order-lg-0 order-xl-1 order-xxl-0">
+            <h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
+            <p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
+          </div>
+          <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="~/img/illustrations/rocket.png" class="w-px-75 m-2" alt="3dRocket" /></span>
+        </div>
+        <button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
+      </div>
+    </div>
+
+    <!-- /Plan Card -->
+  </div>
+  <!--/ Customer Sidebar -->
+
+  <!-- Customer Content -->
+  <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
+    <!-- Customer Pills -->
+    <div class="nav-align-top">
+      <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsOverview"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsBilling"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/Ecommerce/CustomerDetailsNotifications"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
+        </li>
+      </ul>
+    </div>
+    <!--/ Customer Pills -->
+    <!-- Change Password -->
+    <div class="card mb-6">
+      <h5 class="card-header">Change Password</h5>
+      <div class="card-body">
+        <form id="formChangePassword" method="POST" onsubmit="return false">
+          <div class="alert alert-warning alert-dismissible py-3" role="alert">
+            <h5 class="alert-heading mb-1">Ensure that these requirements are met</h5>
+            <span>Minimum 8 characters long, uppercase & symbol</span>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+          <div class="row gy-4 gx-6">
+            <div class="col-12 col-sm-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="newPassword">New Password</label>
+              <div class="input-group input-group-merge">
+                <input class="form-control" type="password" id="newPassword" name="newPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye icon-xs"></i></span>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-6 form-password-toggle form-control-validation">
+              <label class="form-label" for="confirmPassword">Confirm Password</label>
+              <div class="input-group input-group-merge">
+                <input class="form-control" type="password" name="confirmPassword" id="confirmPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
+                <span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye icon-xs"></i></span>
+              </div>
+            </div>
+            <div>
+              <button type="submit" class="btn btn-primary me-2">Change Password</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!--/ Change Password -->
+
+    <!-- Two-steps verification -->
+    <div class="card mb-6">
+      <div class="card-header">
+        <h5 class="mb-0">Two-steps verification</h5>
+        <span class="card-subtitle">Keep your account secure with authentication step.</span>
+      </div>
+      <div class="card-body">
+        <h6 class="mb-1">SMS</h6>
+        <div class="mb-4">
+          <div class="d-flex w-100 action-icons">
+            <input id="defaultInput" class="form-control me-4 phone-number-mask" type="text" placeholder="+1(968) 945-8832" />
+            <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill" data-bs-target="#enableOTP" data-bs-toggle="modal"><i class="icon-base ti tabler-edit icon-md text-heading"></i></a>
+            <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-user-plus icon-md text-heading"></i></a>
+          </div>
+        </div>
+        <p class="mb-0">
+          Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
+          <a href="javascript:void(0);" class="text-primary">Learn more.</a>
+        </p>
+      </div>
+    </div>
+    <!--/ Two-steps verification -->
+
+    <!-- Recent Devices -->
+    <div class="card mb-6">
+      <h5 class="card-header">Recent Devices</h5>
+      <div class="table-responsive">
+        <table class="table border-top table-border-bottom-0">
+          <thead>
+            <tr>
+              <th class="text-truncate">Browser</th>
+              <th class="text-truncate">Device</th>
+              <th class="text-truncate">Location</th>
+              <th class="text-truncate">Recent Activities</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-windows icon-md text-info me-4"></i> Chrome on Windows</td>
+              <td class="text-truncate">HP Spectre 360</td>
+              <td class="text-truncate">Switzerland</td>
+              <td class="text-truncate">10, July 2021 20:07</td>
+            </tr>
+            <tr>
+              <td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-device-mobile icon-md text-danger me-4"></i> Chrome on iPhone</td>
+              <td class="text-truncate">iPhone 12x</td>
+              <td class="text-truncate">Australia</td>
+              <td class="text-truncate">13, July 2021 10:10</td>
+            </tr>
+            <tr>
+              <td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-android icon-md text-success me-4"></i> Chrome on Android</td>
+              <td class="text-truncate">Oneplus 9 Pro</td>
+              <td class="text-truncate">Dubai</td>
+              <td class="text-truncate">14, July 2021 15:15</td>
+            </tr>
+            <tr>
+              <td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-apple icon-md me-4"></i>Chrome on MacOS</td>
+              <td class="text-truncate">Apple iMac</td>
+              <td class="text-truncate">India</td>
+              <td class="text-truncate">16, July 2021 16:17</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!--/ Recent Devices -->
+  </div>
+  <!--/ Customer Content -->
+</div>
+
+<!-- Modal -->
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditUser")
+@await Html.PartialAsync("../_Partials/_Modals/ModalUpgradePlan")
+@await Html.PartialAsync("../_Partials/_Modals/ModalEnableOtp")
+<!-- /Modal -->

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/Dashboard.cshtml

@@ -0,0 +1,755 @@
+@{
+  ViewData["Title"] = "Dashboard - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css">
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css">
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css">
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-dashboard.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- View sales -->
+  <div class="col-xl-4">
+    <div class="card">
+      <div class="d-flex align-items-end row">
+        <div class="col-7">
+          <div class="card-body text-nowrap">
+            <h5 class="card-title mb-0">Congratulations John! 🎉</h5>
+            <p class="mb-2">Best seller of the month</p>
+            <h4 class="text-primary mb-1">$48.9k</h4>
+            <a href="javascript:;" class="btn btn-primary">View Sales</a>
+          </div>
+        </div>
+        <div class="col-5 text-center text-sm-left">
+          <div class="card-body pb-0 px-0 px-md-4">
+            <img src="~/img/illustrations/card-advance-sale.png" height="140" alt="view sales" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- View sales -->
+
+  <!-- Statistics -->
+  <div class="col-xl-8 col-md-12">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title mb-0">Statistics</h5>
+        <small class="text-body-secondary">Updated 1 month ago</small>
+      </div>
+      <div class="card-body d-flex align-items-end">
+        <div class="w-100">
+          <div class="row gy-3">
+            <div class="col-md-3 col-6">
+              <div class="d-flex align-items-center">
+                <div class="badge rounded bg-label-primary me-4 p-2"><i class="icon-base ti tabler-chart-pie-2 icon-lg"></i></div>
+                <div class="card-info">
+                  <h5 class="mb-0">230k</h5>
+                  <small>Sales</small>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-3 col-6">
+              <div class="d-flex align-items-center">
+                <div class="badge rounded bg-label-info me-4 p-2"><i class="icon-base ti tabler-users icon-lg"></i></div>
+                <div class="card-info">
+                  <h5 class="mb-0">8.549k</h5>
+                  <small>Customers</small>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-3 col-6">
+              <div class="d-flex align-items-center">
+                <div class="badge rounded bg-label-danger me-4 p-2"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></div>
+                <div class="card-info">
+                  <h5 class="mb-0">1.423k</h5>
+                  <small>Products</small>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-3 col-6">
+              <div class="d-flex align-items-center">
+                <div class="badge rounded bg-label-success me-4 p-2"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
+                <div class="card-info">
+                  <h5 class="mb-0">$9745</h5>
+                  <small>Revenue</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Statistics -->
+
+  <div class="col-xxl-4 col-12">
+    <div class="row g-6">
+      <!-- Profit last month -->
+      <div class="col-xl-6 col-sm-6">
+        <div class="card h-100">
+          <div class="card-header pb-0">
+            <h5 class="card-title mb-1">Profit</h5>
+            <p class="card-subtitle">Last Month</p>
+          </div>
+          <div class="card-body">
+            <div id="profitLastMonth"></div>
+            <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
+              <h4 class="mb-0">624k</h4>
+              <small class="text-success">+8.24%</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--/ Profit last month -->
+
+      <!-- Expenses -->
+      <div class="col-xl-6 col-sm-6">
+        <div class="card h-100">
+          <div class="card-header pb-2">
+            <h5 class="card-title mb-1">82.5k</h5>
+            <p class="card-subtitle">Expenses</p>
+          </div>
+          <div class="card-body">
+            <div id="expensesChart"></div>
+            <div class="mt-3 text-center">
+              <small class="text-body-secondary mt-3">$21k Expenses more than last month</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--/ Expenses -->
+
+      <!-- Generated Leads -->
+      <div class="col-xl-12">
+        <div class="card h-100">
+          <div class="card-body d-flex justify-content-between">
+            <div class="d-flex flex-column">
+              <div class="card-title mb-auto">
+                <h5 class="mb-0 text-nowrap">Generated Leads</h5>
+                <p class="mb-0">Monthly Report</p>
+              </div>
+              <div class="chart-statistics">
+                <h3 class="card-title mb-0">4,350</h3>
+                <p class="text-success text-nowrap mb-0"><i class="icon-base ti tabler-chevron-up me-1"></i> 15.8%</p>
+              </div>
+            </div>
+            <div id="generatedLeadsChart"></div>
+          </div>
+        </div>
+      </div>
+      <!--/ Generated Leads -->
+    </div>
+  </div>
+
+  <!-- Revenue Report -->
+  <div class="col-xxl-8">
+    <div class="card h-100">
+      <div class="card-body p-0">
+        <div class="row row-bordered g-0">
+          <div class="col-md-8 position-relative p-6">
+            <div class="card-header d-inline-block p-0 text-wrap position-absolute">
+              <h5 class="m-0 card-title">Revenue Report</h5>
+            </div>
+            <div id="totalRevenueChart" class="mt-n1"></div>
+          </div>
+          <div class="col-md-4 p-4">
+            <div class="text-center mt-5">
+              <div class="dropdown">
+                <button class="btn btn-sm btn-label-primary dropdown-toggle" type="button" id="budgetId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <script>
+                    document.write(new Date().getFullYear());
+                  </script>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="budgetId">
+                  <a class="dropdown-item prev-year1" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 1);
+                    </script>
+                  </a>
+                  <a class="dropdown-item prev-year2" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 2);
+                    </script>
+                  </a>
+                  <a class="dropdown-item prev-year3" href="javascript:void(0);">
+                    <script>
+                      document.write(new Date().getFullYear() - 3);
+                    </script>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <h3 class="text-center pt-8 mb-0">$25,825</h3>
+            <p class="mb-8 text-center"><span class="fw-medium text-heading">Budget: </span>56,800</p>
+            <div class="px-3">
+              <div id="budgetChart"></div>
+            </div>
+            <div class="text-center mt-8">
+              <button type="button" class="btn btn-primary">Increase Button</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Revenue Report -->
+
+  <!-- Earning Reports -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Earning Reports</h5>
+          <p class="card-subtitle">Weekly Earnings Overview</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReports" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReports">
+            <a class="dropdown-item" href="javascript:void(0);">Download</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body pb-0">
+        <ul class="p-0 m-0">
+          <li class="d-flex align-items-center mb-5">
+            <div class="me-4">
+              <span class="badge bg-label-primary rounded p-1_5"><i class="icon-base ti tabler-chart-pie-2 icon-md"></i></span>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Net Profit</h6>
+                <small class="text-body">12.4k Sales</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-4">
+                <small>$1,619</small>
+                <div class="d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up text-success"></i>
+                  <small class="text-body-secondary">18.6%</small>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-5">
+            <div class="me-4">
+              <span class="badge bg-label-success rounded p-1_5"><i class="icon-base ti tabler-currency-dollar icon-md"></i></span>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Total Income</h6>
+                <small class="text-body">Sales, Affiliation</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-4">
+                <small>$3,571</small>
+                <div class="d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up text-success"></i>
+                  <small class="text-body-secondary">39.6%</small>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center mb-5">
+            <div class="me-4">
+              <span class="badge bg-label-secondary text-body rounded p-1_5"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Total Expenses</h6>
+                <small class="text-body">ADVT, Marketing</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-4">
+                <small>$430</small>
+                <div class="d-flex align-items-center gap-1">
+                  <i class="icon-base ti tabler-chevron-up text-success"></i>
+                  <small class="text-body-secondary">52.8%</small>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div id="reportBarChart"></div>
+      </div>
+    </div>
+  </div>
+  <!--/ Earning Reports -->
+
+  <!-- Popular Product -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title m-0 me-2">
+          <h5 class="mb-1">Popular Products</h5>
+          <p class="card-subtitle">Total 10.4k Visitors</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="popularProduct" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularProduct">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex mb-6">
+            <div class="me-4">
+              <img src="~/img/products/iphone.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Apple iPhone 13</h6>
+                <small class="text-body d-block">Item: #FXZ-4567</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$999.29</p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6">
+            <div class="me-4">
+              <img src="~/img/products/nike-air-jordan.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Nike Air Jordan</h6>
+                <small class="text-body d-block">Item: #FXZ-3456</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$72.40</p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6">
+            <div class="me-4">
+              <img src="~/img/products/headphones.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Beats Studio 2</h6>
+                <small class="text-body d-block">Item: #FXZ-9485</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$99</p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6">
+            <div class="me-4">
+              <img src="~/img/products/apple-watch.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Apple Watch Series 7</h6>
+                <small class="text-body d-block">Item: #FXZ-2345</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$249.99</p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-6">
+            <div class="me-4">
+              <img src="~/img/products/amazon-echo.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Amazon Echo Dot</h6>
+                <small class="text-body d-block">Item: #FXZ-8959</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$79.40</p>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex">
+            <div class="me-4">
+              <img src="~/img/products/play-station.png" alt="User" class="rounded" width="46" />
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Play Station Console</h6>
+                <small class="text-body d-block">Item: #FXZ-7892</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <p class="mb-0">$129.48</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Popular Product -->
+
+  <!-- Sales by Countries tabs-->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center justify-content-between">
+        <div class="card-title mb-0">
+          <h5 class="mb-1">Orders by Countries</h5>
+          <p class="card-subtitle">62 deliveries in progress</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="salesByCountryTabs" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesByCountryTabs">
+            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+            <a class="dropdown-item" href="javascript:void(0);">Share</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body p-0">
+        <div class="nav-align-top">
+          <ul class="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+            <li class="nav-item">
+              <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-new" aria-controls="navs-justified-new" aria-selected="true">New</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-preparing" aria-controls="navs-justified-link-preparing" aria-selected="false">Preparing</button>
+            </li>
+            <li class="nav-item">
+              <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-shipping" aria-controls="navs-justified-link-shipping" aria-selected="false">Shipping</button>
+            </li>
+          </ul>
+          <div class="tab-content border-0  mx-1">
+            <div class="tab-pane fade show active" id="navs-justified-new" role="tabpanel">
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Myrtle Ullrich</h6>
+                    <p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Barry Schowalter</h6>
+                    <p class="text-body mb-0">939 Orange, California(CA), 92118</p>
+                  </div>
+                </li>
+              </ul>
+              <div class="border-1 border-light border-dashed my-4"></div>
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Veronica Herman</h6>
+                    <p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Helen Jacobs</h6>
+                    <p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="tab-pane fade" id="navs-justified-link-preparing" role="tabpanel">
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Barry Schowalter</h6>
+                    <p class="text-body mb-0">939 Orange, California(CA), 92118</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Myrtle Ullrich</h6>
+                    <p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                  </div>
+                </li>
+              </ul>
+              <div class="border-1 border-light border-dashed my-4"></div>
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Veronica Herman</h6>
+                    <p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Helen Jacobs</h6>
+                    <p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="tab-pane fade" id="navs-justified-link-shipping" role="tabpanel">
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Veronica Herman</h6>
+                    <p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Barry Schowalter</h6>
+                    <p class="text-body mb-0">939 Orange, California(CA), 92118</p>
+                  </div>
+                </li>
+              </ul>
+              <div class="border-1 border-light border-dashed my-4"></div>
+              <ul class="timeline mb-0">
+                <li class="timeline-item ps-6 border-dashed">
+                  <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                    <i class="icon-base ti tabler-circle-check"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-success text-uppercase">sender</small>
+                    </div>
+                    <h6 class="my-50">Myrtle Ullrich</h6>
+                    <p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                  </div>
+                </li>
+                <li class="timeline-item ps-6 border-0">
+                  <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base ti tabler-map-pin"></i>
+                  </span>
+                  <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                      <small class="text-primary text-uppercase">Receiver</small>
+                    </div>
+                    <h6 class="my-50">Helen Jacobs</h6>
+                    <p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--/ Sales by Countries tabs -->
+
+  <!-- Transactions -->
+  <div class="col-xxl-4 col-md-6">
+    <div class="card h-100">
+      <div class="card-header d-flex justify-content-between">
+        <div class="card-title m-0 me-2">
+          <h5 class="mb-1">Transactions</h5>
+          <p class="card-subtitle">Total 58 Transactions done in this Month</p>
+        </div>
+        <div class="dropdown">
+          <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
+          </button>
+          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
+            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <ul class="p-0 m-0">
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-primary me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-wallet icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Wallet</h6>
+                <small class="text-body d-block">Starbucks</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-danger">-$75</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-success me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-browser-check icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Bank Transfer</h6>
+                <small class="text-body d-block">Add Money</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-success">+$480</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-danger me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-brand-paypal icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Paypal</h6>
+                <small class="text-body d-block">Client Payment</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-success">+$268</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-secondary me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-credit-card icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Master Card</h6>
+                <small class="text-body d-block">Ordered iPhone 13</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-danger">-$699</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-info me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-currency-dollar icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Bank Transactions</h6>
+                <small class="text-body d-block">Refund</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-success">+$98</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex mb-3 pb-1 align-items-center">
+            <div class="badge bg-label-danger me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-brand-paypal icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Paypal</h6>
+                <small class="text-body d-block">Client Payment</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-success">+$126</h6>
+              </div>
+            </div>
+          </li>
+          <li class="d-flex align-items-center">
+            <div class="badge bg-label-success me-4 rounded p-1_5">
+              <i class="icon-base ti tabler-building-bank icon-md"></i>
+            </div>
+            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+              <div class="me-2">
+                <h6 class="mb-0">Bank Transfer</h6>
+                <small class="text-body d-block">Pay Office Rent</small>
+              </div>
+              <div class="user-progress d-flex align-items-center gap-1">
+                <h6 class="mb-0 text-danger">-$1290</h6>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!--/ Transactions -->
+
+  <!-- Invoice table -->
+  <div class="col-xxl-8">
+    <div class="card">
+      <div class="card-datatable table-responsive">
+        <table class="table table-sm datatable-invoice border-top">
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+              <th>#</th>
+              <th>Status</th>
+              <th>Total</th>
+              <th>Issued Date</th>
+              <th>Invoice Status</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+  </div>
+  <!-- /Invoice table -->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/OrderDetails.cshtml

@@ -0,0 +1,203 @@
+@{
+  ViewData["Title"] = "Order Details - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-order-details.js"></script>
+<script src="~/js/modal-edit-user.js"></script>
+<script src="~/js/modal-add-new-address.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
+  <div class="d-flex flex-column justify-content-center">
+    <div class="mb-1"><span class="h5">Order #32543 </span><span class="badge bg-label-success me-1 ms-2">Paid</span> <span class="badge bg-label-info">Ready to Pickup</span></div>
+    <p class="mb-0">Aug 17, <span id="orderYear"></span>, 5:48 (ET)</p>
+  </div>
+  <div class="d-flex align-content-center flex-wrap gap-2">
+    <button class="btn btn-label-danger delete-order">Delete Order</button>
+  </div>
+</div>
+
+<!-- Order Details Table -->
+
+<div class="row">
+  <div class="col-12 col-lg-8">
+    <div class="card mb-6">
+      <div class="card-datatable">
+        <table class="datatables-order-details table mb-0">
+          <thead>
+            <tr>
+              <th></th>
+              <th></th>
+              <th class="w-50">products</th>
+              <th class="w-25">price</th>
+              <th class="w-25">qty</th>
+              <th>total</th>
+            </tr>
+          </thead>
+        </table>
+        <div class="d-flex justify-content-end align-items-center m-6 mb-2">
+          <div class="order-calculations">
+            <div class="d-flex justify-content-start mb-2">
+              <span class="w-px-100 text-heading">Subtotal:</span>
+              <h6 class="mb-0">$2093</h6>
+            </div>
+            <div class="d-flex justify-content-start mb-2">
+              <span class="w-px-100 text-heading">Discount:</span>
+              <h6 class="mb-0">$2</h6>
+            </div>
+            <div class="d-flex justify-content-start mb-2">
+              <span class="w-px-100 text-heading">Tax:</span>
+              <h6 class="mb-0">$28</h6>
+            </div>
+            <div class="d-flex justify-content-start">
+              <h6 class="w-px-100 mb-0">Total:</h6>
+              <h6 class="mb-0">$2113</h6>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card mb-6">
+      <div class="card-header">
+        <h5 class="card-title m-0">Shipping activity</h5>
+      </div>
+      <div class="card-body pt-1">
+        <ul class="timeline pb-0 mb-0">
+          <li class="timeline-item timeline-item-transparent border-primary">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header">
+                <h6 class="mb-0">Order was placed (Order ID: #32543)</h6>
+                <small class="text-body-secondary">Tuesday 11:29 AM</small>
+              </div>
+              <p class="mt-3">Your order has been placed successfully</p>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent border-primary">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header">
+                <h6 class="mb-0">Pick-up</h6>
+                <small class="text-body-secondary">Wednesday 11:29 AM</small>
+              </div>
+              <p class="mt-3 mb-3">Pick-up scheduled with courier</p>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent border-primary">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header">
+                <h6 class="mb-0">Dispatched</h6>
+                <small class="text-body-secondary">Thursday 11:29 AM</small>
+              </div>
+              <p class="mt-3 mb-3">Item has been picked up by courier</p>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent border-primary">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header">
+                <h6 class="mb-0">Package arrived</h6>
+                <small class="text-body-secondary">Saturday 15:20 AM</small>
+              </div>
+              <p class="mt-3 mb-3">Package arrived at an Amazon facility, NY</p>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent border-dashed">
+            <span class="timeline-point timeline-point-primary"></span>
+            <div class="timeline-event">
+              <div class="timeline-header">
+                <h6 class="mb-0">Dispatched for delivery</h6>
+                <small class="text-body-secondary">Today 14:12 PM</small>
+              </div>
+              <p class="mt-3 mb-3">Package has left an Amazon facility, NY</p>
+            </div>
+          </li>
+          <li class="timeline-item timeline-item-transparent border-transparent pb-0">
+            <span class="timeline-point timeline-point-secondary"></span>
+            <div class="timeline-event pb-0">
+              <div class="timeline-header">
+                <h6 class="mb-0">Delivery</h6>
+              </div>
+              <p class="mt-1 mb-0">Package will be delivered by tomorrow</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-lg-4">
+    <div class="card mb-6">
+      <div class="card-header">
+        <h5 class="card-title m-0">Customer details</h5>
+      </div>
+      <div class="card-body">
+        <div class="d-flex justify-content-start align-items-center mb-6">
+          <div class="avatar me-3">
+            <img src="~/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+          </div>
+          <div class="d-flex flex-column">
+            <a href="/Apps/Users/View/Account" class="text-body text-nowrap">
+              <h6 class="mb-0">Shamus Tuttle</h6>
+            </a>
+            <span>Customer ID: #58909</span>
+          </div>
+        </div>
+        <div class="d-flex justify-content-start align-items-center mb-6">
+          <span class="avatar rounded-circle bg-label-success me-3 d-flex align-items-center justify-content-center"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></span>
+          <h6 class="text-nowrap mb-0">12 Orders</h6>
+        </div>
+        <div class="d-flex justify-content-between">
+          <h6 class="mb-1">Contact info</h6>
+          <h6 class="mb-1"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#editUser">Edit</a></h6>
+        </div>
+        <p class=" mb-1">Email: Shamus889&#64;yahoo.com</p>
+        <p class=" mb-0">Mobile: +1 (609) 972-22-22</p>
+      </div>
+    </div>
+
+    <div class="card mb-6">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title m-0">Shipping address</h5>
+        <h6 class="m-0"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addNewAddress">Edit</a></h6>
+      </div>
+      <div class="card-body">
+        <p class="mb-0">45 Roker Terrace <br />Latheronwheel <br />KW5 8NW,London <br />UK</p>
+      </div>
+    </div>
+    <div class="card mb-6">
+      <div class="card-header d-flex justify-content-between">
+        <h5 class="card-title m-0">Billing address</h5>
+        <h6 class="m-0"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addNewAddress">Edit</a></h6>
+      </div>
+      <div class="card-body">
+        <p class="mb-6">45 Roker Terrace <br />Latheronwheel <br />KW5 8NW,London <br />UK</p>
+        <h5 class="mb-1">Mastercard</h5>
+        <p class="mb-0">Card Number: ******4291</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+@await Html.PartialAsync("../_Partials/_Modals/ModalAddNewAddress")
+@await Html.PartialAsync("../_Partials/_Modals/ModalEditUser")

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/OrderList.cshtml

@@ -0,0 +1,98 @@
+@{
+  ViewData["Title"] = "Order List - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-order-list.js"></script>
+}
+
+@* ************** Content ************** *@
+<!-- Order List Widget -->
+
+<div class="card mb-6">
+  <div class="card-widget-separator-wrapper">
+    <div class="card-body card-widget-separator">
+      <div class="row gy-4 gy-sm-1">
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
+            <div>
+              <h4 class="mb-0">56</h4>
+              <p class="mb-0">Pending Payment</p>
+            </div>
+            <span class="avatar me-sm-6">
+              <span class="avatar-initial bg-label-secondary rounded text-heading">
+                <i class="icon-base ti tabler-calendar-stats icon-26px text-heading"></i>
+              </span>
+            </span>
+          </div>
+          <hr class="d-none d-sm-block d-lg-none me-6" />
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
+            <div>
+              <h4 class="mb-0">12,689</h4>
+              <p class="mb-0">Completed</p>
+            </div>
+            <span class="avatar p-2 me-lg-6">
+              <span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-checks icon-26px text-heading"></i></span>
+            </span>
+          </div>
+          <hr class="d-none d-sm-block d-lg-none" />
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
+            <div>
+              <h4 class="mb-0">124</h4>
+              <p class="mb-0">Refunded</p>
+            </div>
+            <span class="avatar p-2 me-sm-6">
+              <span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-wallet icon-26px text-heading"></i></span>
+            </span>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start">
+            <div>
+              <h4 class="mb-0">32</h4>
+              <p class="mb-0">Failed</p>
+            </div>
+            <span class="avatar p-2">
+              <span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-alert-octagon icon-26px text-heading"></i></span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Order List Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-order table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>order</th>
+          <th>date</th>
+          <th>customers</th>
+          <th>payment</th>
+          <th>status</th>
+          <th>method</th>
+          <th>actions</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/ProductAdd.cshtml

@@ -0,0 +1,439 @@
+@{
+  ViewData["Title"] = "Product Add - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/katex.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/dropzone/dropzone.css" />
+<link rel="stylesheet" href="~/vendor/libs/flatpickr/flatpickr.css" />
+<link rel="stylesheet" href="~/vendor/libs/tagify/tagify.css" />
+}
+<!-- assets/vendor/libs/dropzone/dropzone.css -->
+@section VendorScripts {
+<script src="~/vendor/libs/quill/katex.js"></script>
+<script src="~/vendor/libs/quill/quill.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/dropzone/dropzone.js"></script>
+<script src="~/vendor/libs/jquery-repeater/jquery-repeater.js"></script>
+<script src="~/vendor/libs/flatpickr/flatpickr.js"></script>
+<script src="~/vendor/libs/tagify/tagify.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-product-add.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-ecommerce">
+  <!-- Add Product -->
+  <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
+    <div class="d-flex flex-column justify-content-center">
+      <h4 class="mb-1">Add a new Product</h4>
+      <p class="mb-0">Orders placed across your store</p>
+    </div>
+    <div class="d-flex align-content-center flex-wrap gap-4">
+      <div class="d-flex gap-4"><button class="btn btn-label-secondary">Discard</button> <button class="btn btn-label-primary">Save draft</button></div>
+      <button type="submit" class="btn btn-primary">Publish product</button>
+    </div>
+  </div>
+
+  <div class="row">
+    <!-- First column-->
+    <div class="col-12 col-lg-8">
+      <!-- Product Information -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h5 class="card-tile mb-0">Product information</h5>
+        </div>
+        <div class="card-body">
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-product-name">Name</label>
+            <input type="text" class="form-control" id="ecommerce-product-name" placeholder="Product title" name="productTitle" aria-label="Product title" />
+          </div>
+          <div class="row mb-6">
+            <div class="col"><label class="form-label" for="ecommerce-product-sku">SKU</label> <input type="number" class="form-control" id="ecommerce-product-sku" placeholder="SKU" name="productSku" aria-label="Product SKU" /></div>
+            <div class="col"><label class="form-label" for="ecommerce-product-barcode">Barcode</label> <input type="text" class="form-control" id="ecommerce-product-barcode" placeholder="0123-4567" name="productBarcode" aria-label="Product barcode" /></div>
+          </div>
+          <!-- Description -->
+          <div>
+            <label class="mb-1">Description (Optional)</label>
+            <div class="form-control p-0">
+              <div class="comment-toolbar border-0 border-bottom">
+                <div class="d-flex justify-content-start">
+                  <span class="ql-formats me-0">
+                    <button class="ql-bold"></button>
+                    <button class="ql-italic"></button>
+                    <button class="ql-underline"></button>
+                    <button class="ql-list" value="ordered"></button>
+                    <button class="ql-list" value="bullet"></button>
+                    <button class="ql-link"></button>
+                    <button class="ql-image"></button>
+                  </span>
+                </div>
+              </div>
+              <div class="comment-editor border-0 pb-6" id="ecommerce-category-description"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- /Product Information -->
+      <!-- Media -->
+      <div class="card mb-6">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <h5 class="mb-0 card-title">Product Image</h5>
+          <a href="javascript:void(0);" class="fw-medium">Add media from URL</a>
+        </div>
+        <div class="card-body">
+          <form action="/upload" class="dropzone needsclick p-0" id="dropzone-basic">
+            <div class="dz-message needsclick">
+              <p class="h4 needsclick pt-3 mb-2">Drag and drop your image here</p>
+              <p class="h6 text-body-secondary d-block fw-normal mb-2">or</p>
+              <span class="needsclick btn btn-sm btn-label-primary" id="btnBrowse">Browse image</span>
+            </div>
+            <div class="fallback">
+              <input name="file" type="file" />
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- /Media -->
+      <!-- Variants -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h5 class="card-title mb-0">Variants</h5>
+        </div>
+        <div class="card-body">
+          <form class="form-repeater">
+            <div data-repeater-list="group-a">
+              <div data-repeater-item>
+                <div class="row g-sm-6 mb-6">
+                  <div class="col-sm-4">
+                    <label class="form-label" for="form-repeater-1-1">Options</label>
+                    <select id="form-repeater-1-1" class="select2 form-select" data-placeholder="Size">
+                      <option value="">Size</option>
+                      <option value="size">Size</option>
+                      <option value="color">Color</option>
+                      <option value="weight">Weight</option>
+                      <option value="smell">Smell</option>
+                    </select>
+                  </div>
+
+                  <div class="col-sm-8">
+                    <label class="form-label invisible" for="form-repeater-1-2">Not visible</label>
+                    <input type="number" id="form-repeater-1-2" class="form-control" placeholder="Enter size" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <button class="btn btn-primary" data-repeater-create>
+                <i class="icon-base ti tabler-plus icon-xs me-2"></i>
+                Add another option
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- /Variants -->
+      <!-- Inventory -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h5 class="card-title mb-0">Inventory</h5>
+        </div>
+        <div class="card-body">
+          <div class="row">
+            <!-- Navigation -->
+            <div class="col-12 col-md-4 col-xl-5 col-xxl-4 mx-auto card-separator">
+              <div class="d-flex justify-content-between flex-column mb-4 mb-md-0 pe-md-4">
+                <div class="nav-align-left">
+                  <ul class="nav nav-pills flex-column w-100">
+                    <li class="nav-item">
+                      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#restock">
+                        <i class="icon-base ti tabler-box icon-sm me-1_5"></i>
+                        <span class="align-middle">Restock</span>
+                      </button>
+                    </li>
+                    <li class="nav-item">
+                      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#shipping">
+                        <i class="icon-base ti tabler-car icon-sm me-1_5"></i>
+                        <span class="align-middle">Shipping</span>
+                      </button>
+                    </li>
+                    <li class="nav-item">
+                      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#global-delivery">
+                        <i class="icon-base ti tabler-world icon-sm me-1_5"></i>
+                        <span class="align-middle">Global Delivery</span>
+                      </button>
+                    </li>
+                    <li class="nav-item">
+                      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#attributes">
+                        <i class="icon-base ti tabler-link icon-sm me-1_5"></i>
+                        <span class="align-middle">Attributes</span>
+                      </button>
+                    </li>
+                    <li class="nav-item">
+                      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#advanced">
+                        <i class="icon-base ti tabler-lock icon-sm me-1_5"></i>
+                        <span class="align-middle">Advanced</span>
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <!-- /Navigation -->
+            <!-- Options -->
+            <div class="col-12 col-md-8 col-xl-7 col-xxl-8 pt-6 pt-md-0">
+              <div class="tab-content p-0 ps-md-4">
+                <!-- Restock Tab -->
+                <div class="tab-pane fade show active" id="restock" role="tabpanel">
+                  <h6 class="text-body">Options</h6>
+                  <label class="form-label" for="ecommerce-product-stock">Add to Stock</label>
+                  <div class="row mb-4 g-4 pe-md-4">
+                    <div class="col-12 col-sm-9">
+                      <input type="number" class="form-control" id="ecommerce-product-stock" placeholder="Quantity" name="quantity" aria-label="Quantity" />
+                    </div>
+                    <div class="col-12 col-sm-3">
+                      <button class="btn btn-primary">Confirm</button>
+                    </div>
+                  </div>
+                  <div>
+                    <h6 class="mb-2 fw-normal">Product in stock now: 54</h6>
+                    <h6 class="mb-2 fw-normal">Product in transit: 390</h6>
+                    <h6 class="mb-2 fw-normal">Last time restocked: 24th June, 2023</h6>
+                    <h6 class="mb-0 fw-normal">Total stock over lifetime: 2430</h6>
+                  </div>
+                </div>
+                <!-- Shipping Tab -->
+                <div class="tab-pane fade" id="shipping" role="tabpanel">
+                  <h6 class="mb-3 text-body">Shipping Type</h6>
+                  <div>
+                    <div class="form-check mb-4">
+                      <input class="form-check-input" type="radio" name="shippingType" id="seller" />
+                      <label class="form-check-label" for="seller">
+                        <span class="mb-1 h6">Fulfilled by Seller</span><br />
+                        <small
+                          >You'll be responsible for product delivery.<br />
+                          Any damage or delay during shipping may cost you a Damage fee.</small
+                        >
+                      </label>
+                    </div>
+                    <div class="form-check mb-6">
+                      <input class="form-check-input" type="radio" name="shippingType" id="companyName" checked />
+                      <label class="form-check-label" for="companyName">
+                        <span class="mb-1 h6">Fulfilled by Company name &nbsp;<span class="badge rounded-2 badge-warning bg-label-warning fs-tiny py-1">RECOMMENDED</span></span
+                        ><br />
+                        <small
+                          >Your product, Our responsibility.<br />
+                          For a measly fee, we will handle the delivery process for you.</small
+                        >
+                      </label>
+                    </div>
+                    <p class="mb-0">See our <a href="javascript:void(0);">Delivery terms and conditions</a> for details</p>
+                  </div>
+                </div>
+                <!-- Global Delivery Tab -->
+                <div class="tab-pane fade" id="global-delivery" role="tabpanel">
+                  <h6 class="mb-3 text-body">Global Delivery</h6>
+                  <!-- Worldwide delivery -->
+                  <div class="form-check mb-4">
+                    <input class="form-check-input" type="radio" name="globalDel" id="worldwide" />
+                    <label class="form-check-label" for="worldwide">
+                      <span class="mb-1 h6">Worldwide delivery</span><br />
+                      <small>Only available with Shipping method: <a href="javascript:void(0);">Fulfilled by Company name</a></small>
+                    </label>
+                  </div>
+                  <!-- Global delivery -->
+                  <div class="form-check mb-4">
+                    <input class="form-check-input" type="radio" name="globalDel" checked />
+                    <label class="form-check-label w-75 pe-12" for="country-selected">
+                      <span class="mb-2 h6">Selected Countries</span>
+                      <input type="text" class="form-control" placeholder="Type Country name" id="country-selected" />
+                    </label>
+                  </div>
+                  <!-- Local delivery -->
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="globalDel" id="local" />
+                    <label class="form-check-label" for="local">
+                      <span class="mb-1 h6">Local delivery</span><br />
+                      <small>Deliver to your country of residence : <a href="javascript:void(0);">Change profile address</a></small>
+                    </label>
+                  </div>
+                </div>
+                <!-- Attributes Tab -->
+                <div class="tab-pane fade" id="attributes" role="tabpanel">
+                  <h6 class="mb-2 text-body">Attributes</h6>
+                  <div>
+                    <!-- Fragile Product -->
+                    <div class="form-check mb-4">
+                      <input class="form-check-input" type="checkbox" value="fragile" id="fragile" />
+                      <label class="form-check-label" for="fragile">
+                        <span class="fw-medium">Fragile Product</span>
+                      </label>
+                    </div>
+                    <!-- Biodegradable -->
+                    <div class="form-check mb-4">
+                      <input class="form-check-input" type="checkbox" value="biodegradable" id="biodegradable" />
+                      <label class="form-check-label" for="biodegradable">
+                        <span class="fw-medium">Biodegradable</span>
+                      </label>
+                    </div>
+                    <!-- Frozen Product -->
+                    <div class="form-check mb-4">
+                      <input class="form-check-input" type="checkbox" value="frozen" checked />
+                      <label class="form-check-label w-75 pe-12" for="frozen">
+                        <span class="mb-1 h6">Frozen Product</span>
+                        <input type="number" class="form-control" placeholder="Max. allowed Temperature" id="frozen" />
+                      </label>
+                    </div>
+                    <!-- Exp Date -->
+                    <div class="form-check mb-6">
+                      <input class="form-check-input" type="checkbox" value="expDate" id="expDate" checked />
+                      <label class="form-check-label w-75 pe-12" for="date-input">
+                        <span class="mb-1 h6">Expiry Date of Product</span>
+                        <input type="date" class="product-date form-control" id="date-input" />
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <!-- /Attributes Tab -->
+                <!-- Advanced Tab -->
+                <div class="tab-pane fade" id="advanced" role="tabpanel">
+                  <h6 class="mb-3 text-body">Advanced</h6>
+                  <div class="row">
+                    <!-- Product Id Type -->
+                    <div class="col">
+                      <label class="form-label" for="product-id">
+                        <span class="mb-1 h6">Product ID Type</span>
+                      </label>
+                      <select id="product-id" class="select2 form-select" data-placeholder="ISBN">
+                        <option value="">ISBN</option>
+                        <option value="ISBN">ISBN</option>
+                        <option value="UPC">UPC</option>
+                        <option value="EAN">EAN</option>
+                        <option value="JAN">JAN</option>
+                      </select>
+                    </div>
+                    <!-- Product Id -->
+                    <div class="col">
+                      <label class="form-label" for="product-id-1">
+                        <span class="mb-1 h6">Product ID</span>
+                      </label>
+                      <input type="number" id="product-id-1" class="form-control" placeholder="ISBN Number" />
+                    </div>
+                  </div>
+                </div>
+                <!-- /Advanced Tab -->
+              </div>
+            </div>
+            <!-- /Options-->
+          </div>
+        </div>
+      </div>
+      <!-- /Inventory -->
+    </div>
+    <!-- /Second column -->
+
+    <!-- Second column -->
+    <div class="col-12 col-lg-4">
+      <!-- Pricing Card -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h5 class="card-title mb-0">Pricing</h5>
+        </div>
+        <div class="card-body">
+          <!-- Base Price -->
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-product-price">Base Price</label>
+            <input type="number" class="form-control" id="ecommerce-product-price" placeholder="Price" name="productPrice" aria-label="Product price" />
+          </div>
+          <!-- Discounted Price -->
+          <div class="mb-6">
+            <label class="form-label" for="ecommerce-product-discount-price">Discounted Price</label>
+            <input type="number" class="form-control" id="ecommerce-product-discount-price" placeholder="Discounted Price" name="productDiscountedPrice" aria-label="Product discounted price" />
+          </div>
+          <!-- Charge tax check box -->
+          <div class="form-check ms-2 mt-2 mb-4">
+            <input class="form-check-input" type="checkbox" value="" id="price-charge-tax" checked />
+            <label class="switch-label" for="price-charge-tax"> Charge tax on this product </label>
+          </div>
+          <!-- Instock switch -->
+          <div class="d-flex justify-content-between align-items-center border-top pt-2">
+            <span class="mb-0">In stock</span>
+            <div class="w-25 d-flex justify-content-end">
+              <div class="form-check form-switch me-n3">
+                <input type="checkbox" class="form-check-input" checked />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- /Pricing Card -->
+      <!-- Organize Card -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h5 class="card-title mb-0">Organize</h5>
+        </div>
+        <div class="card-body">
+          <!-- Vendor -->
+          <div class="mb-6 col ecommerce-select2-dropdown">
+            <label class="form-label mb-1" for="vendor"> Vendor </label>
+            <select id="vendor" class="select2 form-select" data-placeholder="Select Vendor">
+              <option value="">Select Vendor</option>
+              <option value="men-clothing">Men's Clothing</option>
+              <option value="women-clothing">Women's-clothing</option>
+              <option value="kid-clothing">Kid's-clothing</option>
+            </select>
+          </div>
+          <!-- Category -->
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="mb-6 col ecommerce-select2-dropdown">
+              <label class="form-label mb-1" for="category-org">
+                <span>Category</span>
+              </label>
+              <select id="category-org" class="select2 form-select" data-placeholder="Select Category">
+                <option value="">Select Category</option>
+                <option value="Household">Household</option>
+                <option value="Management">Management</option>
+                <option value="Electronics">Electronics</option>
+                <option value="Office">Office</option>
+                <option value="Automotive">Automotive</option>
+              </select>
+            </div>
+            <a href="javascript:void(0);" class="fw-medium btn btn-icon btn-label-primary ms-4"><i class="icon-base ti tabler-plus icon-md"></i></a>
+          </div>
+          <!-- Collection -->
+          <div class="mb-6 col ecommerce-select2-dropdown">
+            <label class="form-label mb-1" for="collection">Collection </label>
+            <select id="collection" class="select2 form-select" data-placeholder="Collection">
+              <option value="">Collection</option>
+              <option value="men-clothing">Men's Clothing</option>
+              <option value="women-clothing">Women's-clothing</option>
+              <option value="kid-clothing">Kid's-clothing</option>
+            </select>
+          </div>
+          <!-- Status -->
+          <div class="mb-6 col ecommerce-select2-dropdown">
+            <label class="form-label mb-1" for="status-org">Status </label>
+            <select id="status-org" class="select2 form-select" data-placeholder="Published">
+              <option value="">Published</option>
+              <option value="Published">Published</option>
+              <option value="Scheduled">Scheduled</option>
+              <option value="Inactive">Inactive</option>
+            </select>
+          </div>
+          <!-- Tags -->
+          <div>
+            <label for="ecommerce-product-tags" class="form-label mb-1">Tags</label>
+            <input id="ecommerce-product-tags" class="form-control" name="ecommerce-product-tags" value="Normal,Standard,Premium" aria-label="Product Tags" />
+          </div>
+        </div>
+      </div>
+      <!-- /Organize Card -->
+    </div>
+    <!-- /Second column -->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/ProductCategoryList.cshtml

@@ -0,0 +1,129 @@
+@{
+  ViewData["Title"] = "Category List - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+<link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/katex.css" />
+<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-ecommerce.css">
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
+<script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
+<script src="~/vendor/libs/quill/katex.js"></script>
+<script src="~/vendor/libs/quill/quill.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-category-list.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="app-ecommerce-category">
+  <!-- Category List Table -->
+  <div class="card">
+    <div class="card-datatable">
+      <table class="datatables-category-list table">
+        <thead>
+          <tr>
+            <th></th>
+            <th></th>
+            <th>Categories</th>
+            <th class="text-nowrap text-sm-end">Total Products &nbsp;</th>
+            <th class="text-nowrap text-sm-end">Total Earning</th>
+            <th class="text-lg-center">Actions</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+  <!-- Offcanvas to add new customer -->
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCategoryList" aria-labelledby="offcanvasEcommerceCategoryListLabel">
+    <!-- Offcanvas Header -->
+    <div class="offcanvas-header py-6">
+      <h5 id="offcanvasEcommerceCategoryListLabel" class="offcanvas-title">Add Category</h5>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <!-- Offcanvas Body -->
+    <div class="offcanvas-body border-top">
+      <form class="pt-0" id="eCommerceCategoryListForm" onsubmit="return true">
+        <!-- Title -->
+        <div class="mb-6 form-control-validation">
+          <label class="form-label" for="ecommerce-category-title">Title</label>
+          <input type="text" class="form-control" id="ecommerce-category-title" placeholder="Enter category title" name="categoryTitle" aria-label="category title" />
+        </div>
+        <!-- Slug -->
+        <div class="mb-6 form-control-validation">
+          <label class="form-label" for="ecommerce-category-slug">Slug</label>
+          <input type="text" id="ecommerce-category-slug" class="form-control" placeholder="Enter slug" aria-label="slug" name="slug" />
+        </div>
+        <!-- Image -->
+        <div class="mb-6">
+          <label class="form-label" for="ecommerce-category-image">Attachment</label>
+          <input class="form-control" type="file" id="ecommerce-category-image" />
+        </div>
+        <!-- Parent category -->
+        <div class="mb-6 ecommerce-select2-dropdown">
+          <label class="form-label" for="ecommerce-category-parent-category">Parent category</label>
+          <select id="ecommerce-category-parent-category" class="select2 form-select" data-placeholder="Select parent category">
+            <option value="">Select parent Category</option>
+            <option value="Household">Household</option>
+            <option value="Management">Management</option>
+            <option value="Electronics">Electronics</option>
+            <option value="Office">Office</option>
+            <option value="Automotive">Automotive</option>
+          </select>
+        </div>
+        <!-- Description -->
+        <div class="mb-6">
+          <label class="form-label">Description</label>
+          <div class="form-control p-0 py-1">
+            <div class="comment-editor border-0" id="ecommerce-category-description"></div>
+            <div class="comment-toolbar border-0 rounded">
+              <div class="d-flex justify-content-end">
+                <span class="ql-formats me-0">
+                  <button class="ql-bold"></button>
+                  <button class="ql-italic"></button>
+                  <button class="ql-underline"></button>
+                  <button class="ql-list" value="ordered"></button>
+                  <button class="ql-list" value="bullet"></button>
+                  <button class="ql-link"></button>
+                  <button class="ql-image"></button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Status -->
+        <div class="mb-6 ecommerce-select2-dropdown">
+          <label class="form-label">Select category status</label>
+          <select id="ecommerce-category-status" class="select2 form-select" data-placeholder="Select category status">
+            <option value="">Select category status</option>
+            <option value="Scheduled">Scheduled</option>
+            <option value="Publish">Publish</option>
+            <option value="Inactive">Inactive</option>
+          </select>
+        </div>
+        <!-- Submit and reset -->
+        <div class="mb-6">
+          <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Add</button>
+          <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/ProductList.cshtml

@@ -0,0 +1,110 @@
+@{
+  ViewData["Title"] = "Product List - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-product-list.js"></script>
+}
+
+@* ************** Content ************** *@
+<!-- Product List Widget -->
+<div class="card mb-6">
+  <div class="card-widget-separator-wrapper">
+    <div class="card-body card-widget-separator">
+      <div class="row gy-4 gy-sm-1">
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
+            <div>
+              <p class="mb-1">In-store Sales</p>
+              <h4 class="mb-1">$5,345.43</h4>
+              <p class="mb-0"><span class="me-2">5k orders</span><span class="badge bg-label-success">+5.7%</span></p>
+            </div>
+            <span class="avatar me-sm-6">
+              <span class="avatar-initial rounded"><i class="icon-base ti tabler-smart-home icon-28px text-heading"></i></span>
+            </span>
+          </div>
+          <hr class="d-none d-sm-block d-lg-none me-6" />
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
+            <div>
+              <p class="mb-1">Website Sales</p>
+              <h4 class="mb-1">$674,347.12</h4>
+              <p class="mb-0"><span class="me-2">21k orders</span><span class="badge bg-label-success">+12.4%</span></p>
+            </div>
+            <span class="avatar p-2 me-lg-6">
+              <span class="avatar-initial rounded"><i class="icon-base ti tabler-device-laptop icon-28px text-heading"></i></span>
+            </span>
+          </div>
+          <hr class="d-none d-sm-block d-lg-none" />
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
+            <div>
+              <p class="mb-1">Discount</p>
+              <h4 class="mb-1">$14,235.12</h4>
+              <p class="mb-0">6k orders</p>
+            </div>
+            <span class="avatar p-2 me-sm-6">
+              <span class="avatar-initial rounded"><i class="icon-base ti tabler-gift icon-28px text-heading"></i></span>
+            </span>
+          </div>
+        </div>
+        <div class="col-sm-6 col-lg-3">
+          <div class="d-flex justify-content-between align-items-start">
+            <div>
+              <p class="mb-1">Affiliate</p>
+              <h4 class="mb-1">$8,345.23</h4>
+              <p class="mb-0"><span class="me-2">150 orders</span><span class="badge bg-label-danger">-3.5%</span></p>
+            </div>
+            <span class="avatar p-2">
+              <span class="avatar-initial rounded"><i class="icon-base ti tabler-wallet icon-28px text-heading"></i></span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Product List Table -->
+<div class="card">
+  <div class="card-header border-bottom">
+    <h5 class="card-title">Filter</h5>
+    <div class="d-flex justify-content-between align-items-center row pt-4 gap-6 gap-md-0 g-md-6">
+      <div class="col-md-4 product_status"></div>
+      <div class="col-md-4 product_category"></div>
+      <div class="col-md-4 product_stock"></div>
+    </div>
+  </div>
+  <div class="card-datatable">
+    <table class="datatables-products table">
+      <thead class="border-top">
+        <tr>
+          <th></th>
+          <th></th>
+          <th>product</th>
+          <th>category</th>
+          <th>stock</th>
+          <th>sku</th>
+          <th>price</th>
+          <th>qty</th>
+          <th>status</th>
+          <th>actions</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/Referrals.cshtml

@@ -0,0 +1,209 @@
+@{
+  ViewData["Title"] = "eCommerce Referral - App";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-referral.js"></script>
+}
+
+<div class="row mb-6 g-6">
+  <div class="col-sm-6 col-xl-3">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex align-items-center justify-content-between">
+          <div class="content-left">
+            <h5 class="mb-1">$24,983</h5>
+            <small>Total Earning</small>
+          </div>
+          <span class="badge bg-label-primary rounded-circle p-2">
+            <i class="icon-base ti tabler-currency-dollar icon-lg"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-xl-3">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex align-items-center justify-content-between">
+          <div class="content-left">
+            <h5 class="mb-1">$8,647</h5>
+            <small>Unpaid Earning</small>
+          </div>
+          <span class="badge bg-label-success rounded-circle p-2">
+            <i class="icon-base ti tabler-gift icon-lg"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-xl-3">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex align-items-center justify-content-between">
+          <div class="content-left">
+            <h5 class="mb-1">2,367</h5>
+            <small>Signups</small>
+          </div>
+          <span class="badge bg-label-danger rounded-circle p-2">
+            <i class="icon-base ti tabler-users icon-lg"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-xl-3">
+    <div class="card">
+      <div class="card-body">
+        <div class="d-flex align-items-center justify-content-between">
+          <div class="content-left">
+            <h5 class="mb-1">4.5%</h5>
+            <small>Conversion Rate</small>
+          </div>
+          <span class="badge bg-label-info rounded-circle p-2">
+            <i class="icon-base ti tabler-infinity icon-lg"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row mb-6 g-6">
+  <div class="col-lg-7">
+    <div class="card h-100">
+      <div class="card-body">
+        <h5 class="mb-1">How to use</h5>
+        <p class="mb-6 card-subtitle mt-0">Integrate your referral code in 3 easy steps.</p>
+        <div class="d-flex flex-column flex-sm-row justify-content-between text-center gap-6">
+          <div class="d-flex flex-column align-items-center">
+            <span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
+              <div class="text-primary">
+                <svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    opacity="0.2"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M35.2623 24.3473L30.1107 18.1621C30.3076 21.952 29.3724 26.3652 26.4849 31.4019L31.4068 35.3394C31.5818 35.4784 31.7894 35.5704 32.01 35.6067C32.2305 35.643 32.4566 35.6224 32.6669 35.5468C32.8773 35.4712 33.0648 35.3432 33.2118 35.1748C33.3588 35.0065 33.4603 34.8034 33.5068 34.5848L35.5248 25.4629C35.5734 25.2695 35.575 25.0672 35.5293 24.8731C35.4836 24.679 35.3921 24.4987 35.2623 24.3473ZM7.30603 24.4457L12.4576 18.277C12.2607 22.0668 13.1959 26.4801 16.0834 31.5004L11.1615 35.4379C10.9876 35.5769 10.7812 35.6693 10.5617 35.7065C10.3422 35.7437 10.1169 35.7245 9.9069 35.6507C9.6969 35.5769 9.50912 35.4509 9.36123 35.2845C9.21334 35.1181 9.11019 34.9168 9.0615 34.6996L7.04353 25.5613C6.99488 25.3679 6.99333 25.1657 7.039 24.9716C7.08468 24.7775 7.17625 24.5971 7.30603 24.4457Z"
+                    fill="currentColor" />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M19.8811 2.47353C20.2896 2.13596 20.8031 1.95117 21.3333 1.95117C21.8651 1.95117 22.38 2.13707 22.7891 2.47657C24.3981 3.7867 27.8808 7.0357 29.8053 12.0381C30.4659 13.7554 30.9381 15.6673 31.0933 17.7625L36.1251 23.8008C36.3563 24.0724 36.5195 24.3951 36.6012 24.7424C36.6822 25.0868 36.6808 25.4453 36.597 25.7889L34.5817 34.9151L34.581 34.9182C34.4952 35.3009 34.3135 35.6555 34.0529 35.9487C33.7924 36.2418 33.4615 36.4639 33.0915 36.5939C32.7215 36.724 32.3245 36.7579 31.9378 36.6923C31.5511 36.6267 31.1875 36.4638 30.881 36.219L30.8806 36.2186L26.2326 32.5002H16.4341L11.7862 36.2186L11.7857 36.219C11.4793 36.4638 11.1156 36.6267 10.729 36.6923C10.3423 36.7579 9.94525 36.724 9.57524 36.5939C9.20523 36.4639 8.87438 36.2418 8.61381 35.9487C8.35324 35.6555 8.17151 35.3009 8.08572 34.9182L8.08502 34.9151L6.06973 25.7889C5.98601 25.4453 5.98455 25.0868 6.06559 24.7424C6.14733 24.395 6.31065 24.072 6.54198 23.8004L11.4767 17.8912C11.6193 15.7424 12.1008 13.7842 12.7825 12.029C14.726 7.02537 18.2534 3.77698 19.8811 2.47353ZM29.1238 18.3076C29.1125 18.2387 29.1086 18.169 29.1118 18.0996C28.9861 16.1202 28.5469 14.3374 27.9387 12.7563C26.1899 8.21065 22.9998 5.22661 21.5224 4.02428L21.5125 4.01626L21.5126 4.01619C21.4623 3.97418 21.3988 3.95117 21.3333 3.95117C21.2678 3.95117 21.2043 3.97418 21.154 4.01619L21.1377 4.02954C19.645 5.22365 16.4124 8.20744 14.6468 12.7531C14.0147 14.3804 13.5649 16.2219 13.4576 18.2718C13.4578 18.3084 13.456 18.345 13.4522 18.3815C13.2924 21.8411 14.1096 25.8898 16.6664 30.5002H25.9943C28.5166 25.8569 29.3045 21.7836 29.1238 18.3076ZM34.5925 25.0857L31.0856 20.8775C30.8435 24.0045 29.8822 27.4702 27.8649 31.2448L32.1295 34.6565C32.1709 34.6896 32.22 34.7116 32.2723 34.7204C32.3245 34.7293 32.3782 34.7247 32.4282 34.7071C32.4782 34.6896 32.5229 34.6596 32.5581 34.6199C32.5931 34.5806 32.6176 34.533 32.6293 34.4817L32.6295 34.4807L34.6468 25.3455C34.6488 25.3361 34.6511 25.3266 34.6534 25.3172C34.6631 25.2789 34.6634 25.2389 34.6543 25.2004C34.6453 25.162 34.6272 25.1263 34.6015 25.0963L34.5924 25.0858L34.5925 25.0857ZM11.5084 20.9734L8.07358 25.0865L8.06535 25.0964L8.06529 25.0963C8.0396 25.1263 8.02147 25.162 8.01242 25.2004C8.00338 25.2389 8.00369 25.2789 8.01332 25.3172C8.01568 25.3266 8.01791 25.3361 8.02001 25.3455L10.0373 34.4807L10.0375 34.4817C10.0492 34.533 10.0737 34.5806 10.1086 34.6199C10.1439 34.6596 10.1886 34.6896 10.2386 34.7071C10.2886 34.7247 10.3422 34.7293 10.3945 34.7204C10.4467 34.7116 10.4959 34.6896 10.5373 34.6565L14.796 31.2495C12.7589 27.5131 11.7736 24.0779 11.5084 20.9734ZM17.7084 36.7502C17.7084 36.1979 18.1561 35.7502 18.7084 35.7502H23.9584C24.5107 35.7502 24.9584 36.1979 24.9584 36.7502C24.9584 37.3025 24.5107 37.7502 23.9584 37.7502H18.7084C18.1561 37.7502 17.7084 37.3025 17.7084 36.7502ZM23.3021 15.7502C23.3021 16.8375 22.4207 17.719 21.3334 17.719C20.2461 17.719 19.3646 16.8375 19.3646 15.7502C19.3646 14.6629 20.2461 13.7815 21.3334 13.7815C22.4207 13.7815 23.3021 14.6629 23.3021 15.7502Z"
+                    fill="currentColor" />
+                </svg>
+              </div>
+            </span>
+            <p class="my-2 w-75">Create & validate your referral link and get</p>
+            <h6 class="text-primary mb-0">$50</h6>
+          </div>
+          <div class="d-flex flex-column align-items-center">
+            <span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
+              <div class="text-primary">
+                <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    opacity="0.2"
+                    d="M9.1875 6.25H32.8125C32.8954 6.25 32.9749 6.28292 33.0335 6.34153L33.739 5.63603L33.0335 6.34153C33.0921 6.40013 33.125 6.47962 33.125 6.5625V35.4375C33.125 35.5204 33.0921 35.5999 33.0335 35.6585L33.7406 36.3656L33.0335 35.6585C32.9749 35.7171 32.8954 35.75 32.8125 35.75H9.1875C9.10462 35.75 9.02513 35.7171 8.96653 35.6585L8.25942 36.3656L8.96653 35.6585C8.90792 35.5999 8.875 35.5204 8.875 35.4375V6.5625C8.875 6.47962 8.90792 6.40014 8.96653 6.34153C9.02514 6.28292 9.10462 6.25 9.1875 6.25ZM17.5277 27.5092C18.5555 28.1959 19.7639 28.5625 21 28.5625C22.6576 28.5625 24.2473 27.904 25.4194 26.7319C26.5915 25.5598 27.25 23.9701 27.25 22.3125C27.25 21.0764 26.8834 19.868 26.1967 18.8402C25.5099 17.8124 24.5338 17.0113 23.3918 16.5383C22.2497 16.0652 20.9931 15.9414 19.7807 16.1826C18.5683 16.4237 17.4547 17.019 16.5806 17.8931C15.7065 18.7672 15.1112 19.8808 14.8701 21.0932C14.6289 22.3056 14.7527 23.5622 15.2258 24.7043C15.6988 25.8463 16.4999 26.8224 17.5277 27.5092Z"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    stroke-width="2" />
+                  <path
+                    d="M21 27.5625C23.8995 27.5625 26.25 25.212 26.25 22.3125C26.25 19.413 23.8995 17.0625 21 17.0625C18.1005 17.0625 15.75 19.413 15.75 22.3125C15.75 25.212 18.1005 27.5625 21 27.5625ZM21 27.5625C19.4718 27.5625 17.9646 27.9183 16.5977 28.6017C15.2309 29.2852 14.0419 30.2774 13.125 31.5M21 27.5625C22.5282 27.5625 24.0354 27.9183 25.4023 28.6017C26.7691 29.2852 27.9581 30.2774 28.875 31.5M15.75 10.5H26.25M34.125 6.5625V35.4375C34.125 36.1624 33.5374 36.75 32.8125 36.75H9.1875C8.46263 36.75 7.875 36.1624 7.875 35.4375V6.5625C7.875 5.83763 8.46263 5.25 9.1875 5.25H32.8125C33.5374 5.25 34.125 5.83763 34.125 6.5625Z"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round" />
+                </svg>
+              </div>
+            </span>
+            <p class="my-2 w-75">For every new signup you get</p>
+            <h6 class="text-primary mb-0">10%</h6>
+          </div>
+          <div class="d-flex flex-column align-items-center">
+            <span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
+              <div class="text-primary">
+                <svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    opacity="0.2"
+                    d="M35.1707 5.89001L4.58941 14.5033C4.32909 14.5745 4.09703 14.7242 3.92485 14.932C3.75268 15.1398 3.64875 15.3956 3.62723 15.6647C3.60571 15.9337 3.66764 16.2028 3.80458 16.4353C3.94153 16.6679 4.14684 16.8526 4.39253 16.9642L18.4363 23.6088C18.7114 23.7362 18.9323 23.9571 19.0597 24.2322L25.7043 38.2759C25.8159 38.5216 26.0006 38.7269 26.2331 38.8639C26.4657 39.0008 26.7348 39.0628 27.0038 39.0412C27.2728 39.0197 27.5287 38.9158 27.7365 38.7436C27.9443 38.5714 28.094 38.3394 28.1652 38.0791L36.7785 7.49782C36.8437 7.27466 36.8478 7.03804 36.7902 6.81279C36.7325 6.58753 36.6154 6.38192 36.451 6.21751C36.2866 6.0531 36.081 5.93594 35.8557 5.87832C35.6304 5.8207 35.3938 5.82474 35.1707 5.89001Z"
+                    fill="currentColor" />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M36.1035 4.90951C35.7063 4.80791 35.2892 4.81452 34.8954 4.92862L4.32569 13.5387L4.32147 13.5398C3.86452 13.6657 3.45723 13.929 3.1548 14.294C2.85144 14.6602 2.66833 15.1109 2.63041 15.5849C2.59249 16.0589 2.70161 16.533 2.9429 16.9428C3.1827 17.35 3.54147 17.6739 3.97083 17.871L18.0086 24.5127L18.0086 24.5127L18.0161 24.5162C18.0762 24.544 18.1245 24.5923 18.1523 24.6524L18.1523 24.6524L18.1558 24.6599L24.7975 38.6978C24.9946 39.1271 25.3185 39.4858 25.7257 39.7256C26.1354 39.9669 26.6096 40.076 27.0836 40.0381C27.5576 40.0001 28.0083 39.817 28.3745 39.5137C28.7395 39.2113 29.0028 38.804 29.1286 38.347L29.1298 38.3428L37.7383 7.77853L37.7398 7.77315C37.854 7.37938 37.8606 6.96221 37.759 6.56497C37.6569 6.16591 37.4493 5.80166 37.1581 5.5104C36.8668 5.21914 36.5026 5.01159 36.1035 4.90951ZM35.4418 6.85256L35.1707 5.89001L35.4514 6.8498C35.5024 6.83489 35.5564 6.83396 35.6079 6.84713C35.6593 6.86029 35.7063 6.88705 35.7439 6.92461C35.7814 6.96218 35.8082 7.00915 35.8214 7.06061C35.8345 7.11207 35.8336 7.16612 35.8187 7.2171L35.8186 7.21709L35.8159 7.22671L27.2026 37.808L27.2026 37.808L27.2006 37.8153C27.1836 37.8773 27.148 37.9326 27.0985 37.9736C27.049 38.0146 26.9881 38.0393 26.9241 38.0444C26.86 38.0496 26.7959 38.0348 26.7406 38.0022C26.6852 37.9696 26.6412 37.9207 26.6147 37.8622L26.6082 37.8483L20.0646 24.0181L26.9856 17.0971C27.3761 16.7066 27.3761 16.0734 26.9856 15.6829C26.5951 15.2924 25.9619 15.2924 25.5714 15.6829L18.6505 22.6038L4.82021 16.0603L4.80626 16.0538C4.74776 16.0272 4.69888 15.9833 4.66627 15.9279C4.63366 15.8725 4.61892 15.8085 4.62404 15.7444C4.62917 15.6803 4.65391 15.6194 4.69491 15.57C4.7359 15.5205 4.79115 15.4848 4.85313 15.4679L4.85314 15.4679L4.86051 15.4658L35.4418 6.85256Z"
+                    fill="currentColor" />
+                </svg>
+              </div>
+            </span>
+            <p class="my-2 w-75">Get other friends to generate link and get</p>
+            <h6 class="text-primary mb-0">$100</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-5">
+    <div class="card h-100">
+      <div class="card-body">
+        <form class="referral-form" onsubmit="return false">
+          <div class="mb-6 mt-1">
+            <h5 class="mb-5">Invite your friends</h5>
+            <div class="d-flex gap-4 align-items-end">
+              <div class="w-100">
+                <label class="form-label mb-1" for="referralEmail">Enter friend’s email address and invite them</label>
+                <input type="email" id="referralEmail" name="referralEmail" class="form-control w-100" placeholder="Email address" />
+              </div>
+              <div>
+                <button type="submit" class="btn btn-primary"><i class="icon-base ti tabler-check icon-xs me-2"></i>Submit</button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h5 class="mb-5">Share the referral link</h5>
+            <div class="d-flex gap-4 align-items-end">
+              <div class="w-100">
+                <label class="form-label mb-1" for="referralLink">Share referral link in social media</label>
+                <input type="text" id="referralLink" name="referralLink" class="form-control w-100 h-px-40" placeholder="pixinvent.com/?ref=6479" />
+              </div>
+              <div class="d-flex">
+                <button type="button" class="btn btn-facebook btn-icon me-2"><i class="icon-base ti tabler-brand-facebook text-white icon-22px"></i></button>
+                <button type="button" class="btn btn-twitter btn-icon"><i class="icon-base ti tabler-brand-twitter text-white icon-22px"></i></button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Referral List Table -->
+<div class="card">
+  <div class="card-datatable">
+    <table class="datatables-referral table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Users</th>
+          <th class="text-nowrap">Referred ID</th>
+          <th>Status</th>
+          <th>Value</th>
+          <th class="text-nowrap">Earnings</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/Reviews.cshtml

@@ -0,0 +1,122 @@
+@{
+  ViewData["Title"] = "eCommerce Manage reviews - App";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
+<link rel="stylesheet" href="~/vendor/libs/apex-charts/apex-charts.css" />
+<link rel="stylesheet" href="~/vendor/libs/raty-js/raty-js.css" />
+}
+
+
+@section VendorScripts {
+<script src="~/vendor/libs/moment/moment.js"></script>
+<script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
+<script src="~/vendor/libs/apex-charts/apexcharts.js"></script>
+<script src="~/vendor/libs/raty-js/raty-js.js"></script>
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-ecommerce.css">
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-reviews.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row mb-6 g-6">
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body row widget-separator g-0">
+        <div class="col-sm-5 border-shift border-end pe-sm-6">
+          <h3 class="text-primary d-flex align-items-center gap-2 mb-2">4.89<i class="icon-base ti tabler-star-filled icon-32px"></i></h3>
+          <p class="h6 mb-2">Total 187 reviews</p>
+          <p class="pe-2 mb-2">All reviews are from genuine customers</p>
+          <span class="badge bg-label-primary mb-4 mb-sm-0">+5 This week</span>
+          <hr class="d-sm-none" />
+        </div>
+
+        <div class="col-sm-7 gap-2 text-nowrap d-flex flex-column justify-content-between ps-sm-6 pt-2 py-sm-2">
+          <div class="d-flex align-items-center gap-2">
+            <small>5 Star</small>
+            <div class="progress w-100 bg-label-primary" style="height:8px;">
+              <div class="progress-bar bg-primary" role="progressbar" style="width: 85%" aria-valuenow="61.50" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <small class="w-px-20 text-end">124</small>
+          </div>
+          <div class="d-flex align-items-center gap-2">
+            <small>4 Star</small>
+            <div class="progress w-100 bg-label-primary" style="height:8px;">
+              <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <small class="w-px-20 text-end">40</small>
+          </div>
+          <div class="d-flex align-items-center gap-2">
+            <small>3 Star</small>
+            <div class="progress w-100 bg-label-primary" style="height:8px;">
+              <div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <small class="w-px-20 text-end">12</small>
+          </div>
+          <div class="d-flex align-items-center gap-2">
+            <small>2 Star</small>
+            <div class="progress w-100 bg-label-primary" style="height:8px;">
+              <div class="progress-bar bg-primary" role="progressbar" style="width: 18%" aria-valuenow="7" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <small class="w-px-20 text-end">7</small>
+          </div>
+          <div class="d-flex align-items-center gap-2">
+            <small>1 Star</small>
+            <div class="progress w-100 bg-label-primary" style="height:8px;">
+              <div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <small class="w-px-20 text-end">2</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card h-100">
+      <div class="card-body row">
+        <div class="col-sm-5">
+          <div class="mb-12">
+            <h5 class="mb-2 text-nowrap">Reviews statistics</h5>
+            <p class="mb-0"><span class="me-2">12 New reviews</span> <span class="badge bg-label-success">+8.4%</span></p>
+          </div>
+
+          <div>
+            <h6 class="mb-2 fw-normal"><span class="text-success me-1">87%</span>Positive reviews</h6>
+            <small>Weekly Report</small>
+          </div>
+        </div>
+        <div class="col-sm-7 d-flex justify-content-sm-end align-items-end">
+          <div id="reviewsChart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- review List Table -->
+<div class="card">
+  <div class="card-datatable table-responsive">
+    <table class="datatables-review table border-top">
+      <thead>
+        <tr>
+          <th></th>
+          <th></th>
+          <th>Product</th>
+          <th class="text-nowrap">Reviewer</th>
+          <th>Review</th>
+          <th>Date</th>
+          <th class="text-nowrap">Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsCheckout.cshtml

@@ -0,0 +1,160 @@
+@{
+  ViewData["Title"] = "Settings Checkout - eCommerce";
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsStoredetails">
+            <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsPayments">
+            <i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsShipping">
+            <i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsLocations">
+            <i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="SettingsNotifications">
+            <i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Checkout Tab -->
+      <div class="tab-pane fade show active" id="checkout" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-header">
+            <div class="card-title m-0">
+              <h5 class="m-0">Customer contact method</h5>
+              <p class="my-0 card-subtitle">Select what contact method customers use to check out.</p>
+            </div>
+          </div>
+
+          <div class="card-body">
+            <div class="form-check my-2 ms-2">
+              <input class="form-check-input" type="radio" name="contactMethod" id="contactPhone" checked />
+              <label class="form-check-label text-heading" for="contactPhone"> Phone number </label>
+            </div>
+            <div class="form-check mb-6 mt-4 ms-2">
+              <input class="form-check-input" type="radio" name="contactMethod" id="contactMail" />
+              <label class="form-check-label text-heading" for="contactMail"> Email </label>
+            </div>
+            <div class="alert d-flex align-items-center alert-info mb-0 h5" role="alert">
+              <span class="alert-icon rounded-2">
+                <i class="icon-base ti tabler-info-circle icon-md"></i>
+              </span>
+              To send SMS updates, you need to install an SMS App.
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Customer information</h5>
+          </div>
+          <div class="card-body">
+            <div class="mb-4">
+              <p class="mb-0">Full name</p>
+              <div class="form-check my-2 ms-2">
+                <input class="form-check-input" type="radio" name="fullName" id="last_name" checked />
+                <label class="form-check-label text-heading" for="last_name"> Only require last name </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="fullName" id="last_and_first_name" />
+                <label class="form-check-label text-heading" for="last_and_first_name"> Require first and last name </label>
+              </div>
+            </div>
+            <div class="mb-4">
+              <p class="mb-0">Company name</p>
+              <div class="form-check my-2 ms-2">
+                <input class="form-check-input" type="radio" name="companyName" id="dont_include_name" checked />
+                <label class="form-check-label text-heading" for="dont_include_name"> Don't include name </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="companyName" id="optional_name" />
+                <label class="form-check-label text-heading" for="optional_name"> Optional </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="companyName" id="required_name" />
+                <label class="form-check-label text-heading" for="required_name"> Required </label>
+              </div>
+            </div>
+            <div class="mb-4">
+              <p class="mb-0">Address line 2 (apartment, unit, etc.)</p>
+              <div class="form-check my-2 ms-2">
+                <input class="form-check-input" type="radio" name="addressLine" id="dont_include_address" checked />
+                <label class="form-check-label text-heading" for="dont_include_address"> Don't include name </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="addressLine" id="optional_address" />
+                <label class="form-check-label text-heading" for="optional_address"> Optional </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="addressLine" id="required_address" />
+                <label class="form-check-label text-heading" for="required_address"> Required </label>
+              </div>
+            </div>
+            <div class="mb-4">
+              <p class="mb-0">Shipping address phone number</p>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="shippingAddress" id="dont_include_ship_address" checked />
+                <label class="form-check-label text-heading" for="dont_include_ship_address"> Don't include name </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="shippingAddress" id="optional_ship_address" />
+                <label class="form-check-label text-heading" for="optional_ship_address"> Optional </label>
+              </div>
+              <div class="form-check mt-4 ms-2">
+                <input class="form-check-input" type="radio" name="shippingAddress" id="required_ship_address" />
+                <label class="form-check-label text-heading" for="required_ship_address"> Required </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex justify-content-end gap-4">
+          <button type="reset" class="btn btn-label-secondary">Discard</button>
+          <a class="btn btn-primary" href="SettingsShipping">Save Changes</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Options-->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsLocations.cshtml

@@ -0,0 +1,160 @@
+@{
+  ViewData["Title"] = "Settings Locations - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsStoreDetails">
+            <i class="icon-sm ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsPayments">
+            <i class="icon-sm ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsCheckout">
+            <i class="icon-sm ti tabler-shopping-cart icon-sm me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsShipping">
+            <i class="icon-sm ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-sm ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="SettingsNotifications">
+            <i class="icon-sm ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Locations Tab -->
+      <div class="tab-pane fade show active" id="locations" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Location Name</h5>
+          </div>
+          <div class="card-body">
+            <div class="col-12 mb-6">
+              <label for="locationName" class="form-label mb-1">Location Name</label>
+              <input class="form-control" type="text" name="locationName" id="locationName" placeholder="Shop location" />
+            </div>
+            <div class="form-check mb-6 ms-2">
+              <input class="form-check-input" type="checkbox" value="" id="def_location" checked />
+              <label class="form-check-label" for="def_location"> Fulfill online orders from this location </label>
+            </div>
+            <div class="alert row alert-info mb-0 h5 mx-0" role="alert">
+              <span class=" col-3 alert-icon me-0 rounded-2 px-0">
+                <i class="icon-sm ti tabler-info-circle icon-md"></i>
+              </span>
+              <div class="col text-wrap ps-4 pe-0">This is your default location. To change whether you fulfill online orders from this location, select another default location first.</div>
+            </div>
+          </div>
+        </div>
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Address</h5>
+          </div>
+          <div class="card-body">
+            <div class="row g-6">
+              <div class="col-12">
+                <label class="form-label mb-1" for="country_region">Country/region</label>
+                <select id="country_region" class="select2 form-select" data-placeholder="United States">
+                  <option value="">United States</option>
+                  <option value="Australia">Australia</option>
+                  <option value="Bangladesh">Bangladesh</option>
+                  <option value="Belarus">Belarus</option>
+                  <option value="Brazil">Brazil</option>
+                  <option value="Canada">Canada</option>
+                  <option value="China">China</option>
+                  <option value="France">France</option>
+                  <option value="Germany">Germany</option>
+                  <option value="India">India</option>
+                  <option value="Indonesia">Indonesia</option>
+                  <option value="Israel">Israel</option>
+                  <option value="Italy">Italy</option>
+                  <option value="Japan">Japan</option>
+                  <option value="Korea">Korea, Republic of</option>
+                  <option value="Mexico">Mexico</option>
+                  <option value="Philippines">Philippines</option>
+                  <option value="Russia">Russian Federation</option>
+                  <option value="South Africa">South Africa</option>
+                  <option value="Thailand">Thailand</option>
+                  <option value="Turkey">Turkey</option>
+                  <option value="Ukraine">Ukraine</option>
+                  <option value="United Arab Emirates">United Arab Emirates</option>
+                  <option value="United Kingdom">United Kingdom</option>
+                  <option value="United States">United States</option>
+                </select>
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="loc_address">Address</label>
+                <input type="text" id="loc_address" class="form-control" placeholder="Address" />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="loc_apa_suite">Apartment, suite, etc.</label>
+                <input type="text" id="loc_apa_suite" class="form-control" placeholder="Apartment, suite, etc." />
+              </div>
+              <div class="col-12 col-md-4"><label class="form-label mb-0" for="loc_phone">Phone</label> <input type="tel" class="form-control phone-mask" id="loc_phone" placeholder="Phone" name="loc_phone" aria-label="loc_phone" /></div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="loc_city">City</label>
+                <input type="text" id="loc_city" class="form-control" placeholder="City" />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="loc_state">State</label>
+                <input type="text" id="loc_state" class="form-control" placeholder="State" />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="loc_pincode">PIN Code</label>
+                <input type="number" id="loc_pincode" class="form-control" placeholder="PIN Code" min="0" max="999999" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-end gap-4">
+          <button type="reset" class="btn btn-label-secondary">Discard</button>
+          <a class="btn btn-primary" href="SettingsNotifications">Save Changes</a>
+        </div>
+      </div>
+    </div>
+    <!-- /Options-->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsNotifications.cshtml

@@ -0,0 +1,267 @@
+@{
+  ViewData["Title"] = "Settings Notifications - eCommerce";
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsStoreDetails">
+            <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsPayments">
+            <i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsCheckout">
+            <i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsShipping">
+            <i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsLocations">
+            <i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Notification Tab -->
+      <div class="tab-pane fade show active" id="notifications" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-body">
+            <h5 class="card-title mb-4">Customer</h5>
+            <div class="card shadow-none mb-6 border-0">
+              <div class="table-responsive border border-top-0 rounded">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th class="text-nowrap w-50">Type</th>
+                      <th class="text-nowrap text-center w-25">Email</th>
+                      <th class="text-nowrap text-center w-25">App</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="text-nowrap text-heading">New customer sign up</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_1" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_2" checked />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-nowrap text-heading">Customer account password reset</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_4" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_5" checked />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="border-transparent">
+                      <td class="text-nowrap text-heading">Customer account invite</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_7" />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_cust_8" />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <h5 class="card-title mb-4">Orders</h5>
+            <div class="card shadow-none mb-6 border-0">
+              <div class="table-responsive border border-top-0 rounded">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th class="text-nowrap w-50">Type</th>
+                      <th class="text-nowrap text-center w-25">Email</th>
+                      <th class="text-nowrap text-center w-25">App</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="text-nowrap text-heading">Order purchase</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_1" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_2" checked />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-nowrap text-heading">Order cancelled</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_4" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_5" />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-nowrap text-heading">Order refund request</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_7" />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_8" checked />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-nowrap text-heading">Order confirmation</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_9" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_10" />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="border-transparent">
+                      <td class="text-nowrap text-heading">Payment error</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_11" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_order_12" />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <h5 class="card-title mb-4">Shipping</h5>
+            <div class="card shadow-none border-0">
+              <div class="table-responsive border border-top-0 rounded">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th class="text-nowrap w-50">Type</th>
+                      <th class="text-nowrap text-center w-25">Email</th>
+                      <th class="text-nowrap text-center w-25">App</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="text-nowrap text-heading">Picked up</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_1" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_2" checked />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="text-nowrap text-heading">Shipping update</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_3" checked />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_4" />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="border-transparent">
+                      <td class="text-nowrap text-heading">Delivered</td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_5" />
+                        </div>
+                      </td>
+                      <td>
+                        <div class="form-check d-flex justify-content-center">
+                          <input class="form-check-input" type="checkbox" id="defaultCheck_ship_6" checked />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="d-flex justify-content-end gap-4">
+          <button type="button" class="btn btn-label-secondary">Discard</button>
+          <button type="submit" class="btn btn-primary">Save Changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Options-->
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsPayments.cshtml

@@ -0,0 +1,145 @@
+@{
+  ViewData["Title"] = "Settings Payments - eCommerce";
+}
+
+@section PageStyles {
+<link rel="stylesheet" href="~/vendor/css/pages/app-ecommerce.css">
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsStoreDetails">
+            <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsCheckout">
+            <i class="icon-base ti tabler-shopping-cart me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsShipping">
+            <i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsLocations">
+            <i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="SettingsNotifications">
+            <i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Payments Tab -->
+      <div class="tab-pane fade show active" id="payments" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Payment providers</h5>
+          </div>
+
+          <div class="card-body">
+            <p class="mb-5">Providers that enable you to accept payment methods at a rate set by the third-party. An additional fee will apply to new orders once you select a plan</p>
+            <button class="btn btn-label-primary" data-bs-toggle="modal" data-bs-target="#paymentProvider">Choose a provider</button>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <div class="card-title m-0">
+              <h5 class="m-0">Supported payment methods</h5>
+              <p class="my-0 card-subtitle">Payment methods that are available with one of Vuexy's approved payment providers.</p>
+            </div>
+          </div>
+          <div class="card-body">
+            <h6 class="mb-5">Default</h6>
+            <div class="row mb-5 g-6 bg-label-secondary px-6 rounded-2 mx-0 mt-0 bg-lighter">
+              <div class="col-12 d-flex justify-content-between align-items-center border-bottom p-0 pb-6">
+                <img src="~/img/icons/payments/paypal.png" alt="Paypal" class="gray-shadow-sm rounded" width="57" />
+
+                <span class="fw-medium"><a href="javascript:void(0);">Activate Paypal</a></span>
+              </div>
+              <div class="col-12 p-0">
+                <div class="row">
+                  <div class="col-4">
+                    <p class="mb-2 small">Provider</p>
+                    <p class="text-heading fw-medium">Paypal</p>
+                  </div>
+                  <div class="col-4">
+                    <p class="mb-2 small">Status</p>
+                    <p class="badge bg-label-warning fw-medium">Inactive</p>
+                  </div>
+                  <div class="col-4">
+                    <p class="mb-2 small">Transaction Fee</p>
+                    <p class="text-heading fw-medium">2.99%</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button class="btn btn-label-primary" data-bs-toggle="modal" data-bs-target="#paymentMethods">Add payment methods</button>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Manual payment methods</h5>
+          </div>
+
+          <div class="card-body">
+            <p class="mb-5">Payments that are made outside your online store. When a customer selects a manual payment method such as cash on delivery. You'll need to approve their order before it can be fulfilled.</p>
+            <div class="btn-group">
+              <button type="button" class="btn btn-label-primary">Add manual payment method</button>
+              <button type="button" class="btn btn-label-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                <span class="visually-hidden">Toggle Dropdown</span>
+              </button>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="javascript:void(0);">Create custom payment method</a></li>
+                <li><a class="dropdown-item" href="javascript:void(0);">Bank deposit</a></li>
+                <li><a class="dropdown-item" href="javascript:void(0);">Money order</a></li>
+                <li><a class="dropdown-item" href="javascript:void(0);">Cash on delivery (COD)</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex justify-content-end gap-4">
+          <button type="reset" class="btn btn-label-secondary">Discard</button>
+          <a class="btn btn-primary" href="SettingsCheckout">Save Changes</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Options-->
+</div>
+
+@await Html.PartialAsync("../_Partials/_Modals/ModalSelectPaymentProviders")
+@await Html.PartialAsync("../_Partials/_Modals/ModalSelectPaymentMethods")

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsShipping.cshtml

@@ -0,0 +1,238 @@
+@{
+  ViewData["Title"] = "Settings Shipping & Delivery - eCommerce";
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/fonts/flag-icons.css" />
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsStoredetails">
+            <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsPayments">
+            <i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsCheckout">
+            <i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsLocations">
+            <i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="SettingsNotifications">
+            <i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Shipping & delivery Tab -->
+      <div class="tab-pane fade show active" id="shipping_delivery" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-header d-flex justify-content-between align-items-center flex-wrap row-gap-2">
+            <div class="card-title m-0">
+              <h5 class="m-0">Shipping zones</h5>
+              <p class="my-0 card-subtitle">Choose where you ship and how much you charge for shipping at check out.</p>
+            </div>
+            <a href="javascript:void(0);" class="fw-medium">Create zone</a>
+          </div>
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+              <div class="d-flex align-items-center">
+                <div class="avatar avatar-sm me-2">
+                  <img class="rounded-circle mb-4" src="~/img/avatars/1.png" height="34" width="34" alt="User avatar" />
+                </div>
+                <div class="d-flex flex-column">
+                  <h6 class="mb-0">Domestic</h6>
+                  <p class="mb-0 small">United states of America</p>
+                </div>
+              </div>
+              <div>
+                <a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill me-1"><i class="icon-base ti tabler-pencil icon-20px"></i></a>
+                <a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-20px"></i></a>
+              </div>
+            </div>
+
+            <div class="card mb-4 shadow-none border border-top-0">
+              <div class="table-responsive text-nowrap rounded">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>Rate Name</th>
+                      <th>Condition</th>
+                      <th>Price</th>
+                      <th class="text-end">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Weight</td>
+                      <td>5kg -10kg</td>
+                      <td>$9</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-1"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-1"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>VAT</td>
+                      <td>12%</td>
+                      <td>$25</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="border-transparent">
+                      <td>Duty</td>
+                      <td>-</td>
+                      <td>-</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <button class="btn btn-label-primary mb-6">Add Rate</button>
+
+            <div class="d-flex justify-content-between align-items-center mb-4">
+              <div class="d-flex align-items-center">
+                <div class="me-2">
+                  <i class="icon-base fi fi-us fis rounded-circle icon-28px"></i>
+                </div>
+                <div class="d-flex flex-column">
+                  <h6 class="mb-0">International</h6>
+                  <p class="mb-0 small">United states of America</p>
+                </div>
+              </div>
+              <div>
+                <a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill me-1"><i class="icon-base ti tabler-pencil icon-20px"></i></a>
+                <a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-20px"></i></a>
+              </div>
+            </div>
+
+            <div class="card mb-4 shadow-none border border-top-0">
+              <div class="table-responsive text-nowrap rounded">
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>Rate Name</th>
+                      <th>Condition</th>
+                      <th>Price</th>
+                      <th class="text-end">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Weight</td>
+                      <td>5kg -10kg</td>
+                      <td>$19</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-1"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-1"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>VAT</td>
+                      <td>12%</td>
+                      <td>$25</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="border-transparent">
+                      <td>Duty</td>
+                      <td>Japan</td>
+                      <td>$49</td>
+                      <td class="text-end">
+                        <div class="dropdown pe-4">
+                          <button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
+                            <a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <button class="btn btn-label-primary">Add Rate</button>
+          </div>
+        </div>
+
+        <div class="d-flex justify-content-end gap-4">
+          <button type="reset" class="btn btn-label-secondary">Discard</button>
+          <a class="btn btn-primary" href="SettingsLocations">Save Changes</a>
+        </div>
+      </div>
+    </div>
+    <!-- /Options-->
+  </div>
+</div>

resources/vuexy-admin-v10.11.1/aspnet-core/MVC/AspnetCoreMvcFull/Views/Ecommerce/SettingsStoreDetails.cshtml

@@ -0,0 +1,270 @@
+@{
+  ViewData["Title"] = "Settings Store Details - eCommerce";
+}
+
+@section VendorStyles {
+<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
+}
+
+@section VendorScripts {
+<script src="~/vendor/libs/cleave-zen/cleave-zen.js"></script>
+<script src="~/vendor/libs/select2/select2.js"></script>
+}
+
+@section PageScripts {
+<script src="~/js/app-ecommerce-settings.js"></script>
+}
+
+@* ************** Content ************** *@
+<div class="row g-6">
+  <!-- Navigation -->
+  <div class="col-12 col-lg-4">
+    <div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
+      <h5 class="mb-4">Getting Started</h5>
+      <ul class="nav nav-align-left nav-pills flex-column">
+        <li class="nav-item mb-1">
+          <a class="nav-link active" href="javascript:void(0);">
+            <i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
+            <span class="align-middle">Store details</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsPayments">
+            <i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
+            <span class="align-middle">Payments</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsCheckout">
+            <i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
+            <span class="align-middle">Checkout</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsShipping">
+            <i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
+            <span class="align-middle">Shipping & delivery</span>
+          </a>
+        </li>
+        <li class="nav-item mb-1">
+          <a class="nav-link" href="SettingsLocations">
+            <i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
+            <span class="align-middle">Locations</span>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="SettingsNotifications">
+            <i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
+            <span class="align-middle">Notifications</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- /Navigation -->
+
+  <!-- Options -->
+  <div class="col-12 col-lg-8 pt-6 pt-lg-0">
+    <div class="tab-content p-0">
+      <!-- Store Details Tab -->
+      <div class="tab-pane fade show active" id="store_details" role="tabpanel">
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Profile</h5>
+          </div>
+          <div class="card-body">
+            <div class="row mb-6 g-6">
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="ecommerce-settings-details-name">Store Name</label>
+                <input type="text" class="form-control" id="ecommerce-settings-details-name" placeholder="John Doe" name="settingsDet" aria-label="settings Details" />
+              </div>
+
+              <div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-details-phone">Phone</label> <input type="tel" class="form-control phone-mask" id="ecommerce-settings-details-phone" placeholder="+(123) 456-7890" name="phone" aria-label="phone" /></div>
+
+              <div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-details-email">Store contact email</label> <input type="email" class="form-control" id="ecommerce-settings-details-email" placeholder="johndoe@gmail.com" name="email" aria-label="email" /></div>
+
+              <div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-sender-email">Sender email</label> <input type="email" class="form-control" id="ecommerce-settings-sender-email" placeholder="johndoe@gmail.com" name="sender_email" aria-label="sender email" /></div>
+            </div>
+
+            <div class="alert row alert-warning mb-0 h5 mx-0 " role="alert">
+              <span class=" col-3 alert-icon me-0 rounded-2 px-0">
+                <i class="icon-base ti tabler-bell icon-md"></i>
+              </span>
+              <div class="col text-wrap ps-4 pe-0 pt-sm-1">Confirm that you have access to johndoe@gmail.com in sender email settings.</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <h5 class="card-title m-0">Billing information</h5>
+          </div>
+          <div class="card-body">
+            <div class="row g-6">
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="business-name">Legal business name</label>
+                <input type="text" id="business-name" class="form-control" placeholder="Business name" />
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="country_region">Country/region</label>
+                <select id="country_region" class="select2 form-select" data-placeholder="United States">
+                  <option value="">United States</option>
+                  <option value="Australia">Australia</option>
+                  <option value="Bangladesh">Bangladesh</option>
+                  <option value="Belarus">Belarus</option>
+                  <option value="Brazil">Brazil</option>
+                  <option value="Canada">Canada</option>
+                  <option value="China">China</option>
+                  <option value="France">France</option>
+                  <option value="Germany">Germany</option>
+                  <option value="India">India</option>
+                  <option value="Indonesia">Indonesia</option>
+                  <option value="Israel">Israel</option>
+                  <option value="Italy">Italy</option>
+                  <option value="Japan">Japan</option>
+                  <option value="Korea">Korea, Republic of</option>
+                  <option value="Mexico">Mexico</option>
+                  <option value="Philippines">Philippines</option>
+                  <option value="Russia">Russian Federation</option>
+                  <option value="South Africa">South Africa</option>
+                  <option value="Thailand">Thailand</option>
+                  <option value="Turkey">Turkey</option>
+                  <option value="Ukraine">Ukraine</option>
+                  <option value="United Arab Emirates">United Arab Emirates</option>
+                  <option value="United Kingdom">United Kingdom</option>
+                  <option value="United States">United States</option>
+                </select>
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="bill_address">Address</label>
+                <input type="text" id="bill_address" class="form-control" placeholder="Address" />
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="apa_suite">Apartment, suite, etc.</label>
+                <input type="text" id="apa_suite" class="form-control" placeholder="Apartment, suite, etc." />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="bill_city">City</label>
+                <input type="text" id="bill_city" class="form-control" placeholder="City" />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="bill_state">State</label>
+                <input type="text" id="bill_state" class="form-control" placeholder="State" />
+              </div>
+              <div class="col-12 col-md-4">
+                <label class="form-label mb-1" for="bill_pincode">PIN Code</label>
+                <input type="number" id="bill_pincode" class="form-control" placeholder="PIN Code" min="0" max="999999" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <div class="card-title mb-0">
+              <h5 class="m-0">Time zone and units of measurement</h5>
+              <p class="my-0 card-subtitle">Used to calculate product prices, shipping weighs, and order times.</p>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="row g-6">
+              <div class="col-12">
+                <label for="timeZones" class="form-label mb-1">Time zone</label>
+                <select id="timeZones" class="select2 form-select" data-placeholder="(GMT-12:00) International Date Line West">
+                  <option value="">(GMT-12:00) International Date Line West</option>
+                  <option value="-12">(GMT-12:00) International Date Line West</option>
+                  <option value="-11">(GMT-11:00) Midway Island, Samoa</option>
+                  <option value="-10">(GMT-10:00) Hawaii</option>
+                  <option value="-9">(GMT-09:00) Alaska</option>
+                  <option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
+                  <option value="-8">(GMT-08:00) Tijuana, Baja California</option>
+                  <option value="-7">(GMT-07:00) Arizona</option>
+                  <option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
+                  <option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
+                  <option value="-6">(GMT-06:00) Central America</option>
+                  <option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
+                  <option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
+                  <option value="-6">(GMT-06:00) Saskatchewan</option>
+                  <option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
+                  <option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
+                  <option value="-5">(GMT-05:00) Indiana (East)</option>
+                  <option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
+                  <option value="-4">(GMT-04:00) Caracas, La Paz</option>
+                </select>
+              </div>
+              <div class="col-12 col-md-6">
+                <label for="unitSystemDropdown" class="form-label mb-1">Unit system</label>
+                <select id="unitSystemDropdown" class="select2 form-select" data-placeholder="Metric">
+                  <option value="">Metric</option>
+                  <option value="metric">Metric</option>
+                  <option value="imperial">Imperial</option>
+                  <option value="us">US Customary</option>
+                  <option value="si">International System</option>
+                </select>
+              </div>
+              <div class="col-12 col-md-6">
+                <label for="weightUnits" class="form-label mb-1">Default weight unit</label>
+                <select id="weightUnits" class="select2 form-select" data-placeholder="Kilograms">
+                  <option value="">Kilograms</option>
+                  <option value="kg">Kilograms</option>
+                  <option value="lb">Pounds</option>
+                  <option value="g">Grams</option>
+                  <option value="mg">Milligrams</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <div class="card-title mb-0">
+              <h5 class="m-0">Store currency</h5>
+              <p class="my-0 card-subtitle">The currency your products are sold in.</p>
+            </div>
+          </div>
+          <div class="card-body">
+            <div>
+              <label for="currency-store" class="form-label mb-1">Store currency</label>
+              <select id="currency-store" class="select2 form-select" data-placeholder="Store currency">
+                <option value="">Store Currency</option>
+                <option value="usd">USD</option>
+                <option value="euro">Euro</option>
+                <option value="pound">Pound</option>
+                <option value="bitcoin">Bitcoin</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="card mb-6">
+          <div class="card-header">
+            <div class="card-title mb-0">
+              <h5 class="m-0">Order id format</h5>
+              <p class="my-0 card-subtitle">Shown on the Orders page, customer pages, and customer order notifications to identify orders.</p>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="row g-6">
+              <div class="col-12 col-md-6">
+                <label class="form-label mb-1" for="ecommerce-settings-details-prefix">Prefix</label>
+                <div class="input-group input-group-merge">
+                  <span class="input-group-text text-body-secondary">#</span>
+                  <input type="number" class="form-control" id="ecommerce-settings-details-prefix" name="prefix" aria-label="Prefix" min="0" />
+                </div>
+                <p class="mb-0 pt-2">Your order ID will appear as #1001, #1002, #1003 ...</p>
+              </div>
+              <div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-sender-suffix">Suffix</label> <input type="text" class="form-control" id="ecommerce-settings-sender-suffix" name="suffix" aria-label="Suffix" /></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="d-flex justify-content-end gap-4">
+          <button type="reset" class="btn btn-label-secondary">Discard</button>
+          <a class="btn btn-primary" href="SettingsPayments">Save Changes</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Options-->
+</div>