init

2023-11-07 23:29:26 +08:00 · 2023-11-07 23:29:26 +08:00 · fa8609d2fa
commit fa8609d2fa
502 changed files with 40427 additions and 0 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+**/wwwroot/libs/** linguist-vendored
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,265 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# 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 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# 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
+
+# DNX
+project.lock.json
+artifacts/
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.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
+
+# 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
+
+# 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
+# TODO: 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
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+# NuGet v3's project.json files produces more ignoreable 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
+
+# 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
+*.pfx
+*.publishsettings
+node_modules/
+orleans.codegen.cs
+
+# 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
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# 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
+
+# Admin
+src/Sinet.Universal.Admin.Web/Logs/*
+src/Sinet.Universal.Admin.Web.Host/Logs/*
+src/Sinet.Universal.Admin.AuthServer/Logs/*
+src/Sinet.Universal.Admin.HttpApi.Host/Logs/*
+src/Sinet.Universal.Admin.HttpApi.Host/Logs/*
+src/Sinet.Universal.Admin.DbMigrator/Logs/*
+src/Sinet.Universal.Admin.Blazor.Server/Logs/*
+src/Sinet.Universal.Admin.Blazor.Server.Tiered/Logs/*
+
+# Use abp install-libs to restore.
+**/wwwroot/libs/*
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 4
+}
--- a/NuGet.Config
+++ b/NuGet.Config
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+  </packageSources>
+</configuration>
--- a/README.md
+++ b/README.md
@ -0,0 +1,41 @@
+# Sinet.Universal.Admin
+
+## About this solution
+
+This is a layered startup solution based on [Domain Driven Design (DDD)](https://docs.abp.io/en/abp/latest/Domain-Driven-Design) practises. All the fundamental ABP modules are already installed. 
+
+### Pre-requirements
+
+* [.NET 7.0+ SDK](https://dotnet.microsoft.com/download/dotnet)
+* [Node v18 or 20](https://nodejs.org/en)
+
+### Configurations
+
+The solution comes with a default configuration that works out of the box. However, you may consider to change the following configuration before running your solution:
+
+* Check the `ConnectionStrings` in `appsettings.json` files under the `Sinet.Universal.Admin.HttpApi.Host` and `Sinet.Universal.Admin.DbMigrator` projects and change it if you need.
+
+### Before running the application
+
+* Run `abp install-libs` command on your solution folder to install client-side package dependencies. This step is automatically done when you create a new solution with ABP CLI. However, you should run it yourself if you have first cloned this solution from your source control, or added a new client-side package dependency to your solution.
+* Run `Sinet.Universal.Admin.DbMigrator` to create the initial database. This should be done in the first run. It is also needed if a new database migration is added to the solution later.
+
+### Solution structure
+
+This is a layered monolith application that consists of the following applications:
+
+* `Sinet.Universal.Admin.DbMigrator`: A console application which applies the migrations and also seeds the initial data. It is useful on development as well as on production environment.
+* `Sinet.Universal.Admin.HttpApi.Host`: ASP.NET Core API application that is used to expose the APIs to the clients.
+* `Sinet.Universal.Admin.Blazor`: ASP.NET Core Blazor Server application that is the essential web application of the solution.
+
+## Deploying the application
+
+Deploying an ABP application is not different than deploying any .NET or ASP.NET Core application. However, there are some topics that you should care about when you are deploying your applications. You can check ABP's [Deployment documentation](https://docs.abp.io/en/abp/latest/Deployment/Index) before deploying your application.
+
+### Additional resources
+
+You can see the following resources to learn more about your solution and the ABP Framework:
+
+* [Web Application Development Tutorial](https://docs.abp.io/en/abp/latest/Tutorials/Part-1)
+* [Application Startup Template Structure](https://docs.abp.io/en/abp/latest/Startup-Templates/Application)
+* [LeptonX Lite Blazor UI](https://docs.abp.io/en/abp/latest/Themes/LeptonXLite/Blazor?UI=Blazor)
--- a/Sinet.Universal.Admin.sln
+++ b/Sinet.Universal.Admin.sln
@ -0,0 +1,160 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34227.203
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Domain", "src\server\Sinet.Universal.Admin.Domain\Sinet.Universal.Admin.Domain.csproj", "{554AD327-6DBA-4F8F-96F8-81CE7A0C863F}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Application", "src\server\Sinet.Universal.Admin.Application\Sinet.Universal.Admin.Application.csproj", "{1A94A50E-06DC-43C1-80B5-B662820EC3EB}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.EntityFrameworkCore", "src\server\Sinet.Universal.Admin.EntityFrameworkCore\Sinet.Universal.Admin.EntityFrameworkCore.csproj", "{C956DD76-69C8-4A9C-83EA-D17DF83340FD}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{CA9AC87F-097E-4F15-8393-4BC07735A5B0}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "test", "test", "{04DBDB01-70F4-4E06-B468-8F87850B22BE}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Application.Tests", "test\Sinet.Universal.Admin.Application.Tests\Sinet.Universal.Admin.Application.Tests.csproj", "{50B2631D-129C-47B3-A587-029CCD6099BC}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Domain.Shared", "src\common\Sinet.Universal.Admin.Domain.Shared\Sinet.Universal.Admin.Domain.Shared.csproj", "{42F719ED-8413-4895-B5B4-5AB56079BC66}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Application.Contracts", "src\common\Sinet.Universal.Admin.Application.Contracts\Sinet.Universal.Admin.Application.Contracts.csproj", "{520659C8-C734-4298-A3DA-B539DB9DFC0B}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.HttpApi", "src\common\Sinet.Universal.Admin.HttpApi\Sinet.Universal.Admin.HttpApi.csproj", "{4164BDF7-F527-4E85-9CE6-E3C2D7426A27}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.HttpApi.Client", "src\common\Sinet.Universal.Admin.HttpApi.Client\Sinet.Universal.Admin.HttpApi.Client.csproj", "{3B5A0094-670D-4BB1-BFDD-61B88A8773DC}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.EntityFrameworkCore.Tests", "test\Sinet.Universal.Admin.EntityFrameworkCore.Tests\Sinet.Universal.Admin.EntityFrameworkCore.Tests.csproj", "{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.TestBase", "test\Sinet.Universal.Admin.TestBase\Sinet.Universal.Admin.TestBase.csproj", "{91853F21-9CD9-4132-BC29-A7D5D84FFFE7}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Domain.Tests", "test\Sinet.Universal.Admin.Domain.Tests\Sinet.Universal.Admin.Domain.Tests.csproj", "{E512F4D9-9375-480F-A2F6-A46509F9D824}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.HttpApi.Client.ConsoleTestApp", "test\Sinet.Universal.Admin.HttpApi.Client.ConsoleTestApp\Sinet.Universal.Admin.HttpApi.Client.ConsoleTestApp.csproj", "{EF480016-9127-4916-8735-D2466BDBC582}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.DbMigrator", "src\server\Sinet.Universal.Admin.DbMigrator\Sinet.Universal.Admin.DbMigrator.csproj", "{AA94D832-1CCC-4715-95A9-A483F23A1A5D}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.HttpApi.Host", "src\server\Sinet.Universal.Admin.HttpApi.Host\Sinet.Universal.Admin.HttpApi.Host.csproj", "{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Blazor", "src\client\Sinet.Universal.Admin.Blazor\Sinet.Universal.Admin.Blazor.csproj", "{27B2DDC7-8B75-4322-A312-25419C15D9D8}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "common", "common", "{3BF71760-5526-4089-8A43-ED8430847906}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "server", "server", "{CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "client", "client", "{15E62D85-34D1-44EE-9C43-AD3CC8D8558D}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Server.Host", "src\server\Sinet.Universal.Admin.Server.Host\Sinet.Universal.Admin.Server.Host.csproj", "{CEBD131C-0B70-4BBF-99C5-47E2EB415554}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.RCL", "src\common\Sinet.Universal.Admin.RCL\Sinet.Universal.Admin.RCL.csproj", "{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Sinet.Universal.Admin.Web", "src\client\Sinet.Universal.Admin.Web\Sinet.Universal.Admin.Web.csproj", "{6C032DF5-C957-468F-A4C9-CA8167508DEF}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{554AD327-6DBA-4F8F-96F8-81CE7A0C863F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{554AD327-6DBA-4F8F-96F8-81CE7A0C863F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{554AD327-6DBA-4F8F-96F8-81CE7A0C863F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{554AD327-6DBA-4F8F-96F8-81CE7A0C863F}.Release|Any CPU.Build.0 = Release|Any CPU
+		{1A94A50E-06DC-43C1-80B5-B662820EC3EB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1A94A50E-06DC-43C1-80B5-B662820EC3EB}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1A94A50E-06DC-43C1-80B5-B662820EC3EB}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1A94A50E-06DC-43C1-80B5-B662820EC3EB}.Release|Any CPU.Build.0 = Release|Any CPU
+		{C956DD76-69C8-4A9C-83EA-D17DF83340FD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{C956DD76-69C8-4A9C-83EA-D17DF83340FD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{C956DD76-69C8-4A9C-83EA-D17DF83340FD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{C956DD76-69C8-4A9C-83EA-D17DF83340FD}.Release|Any CPU.Build.0 = Release|Any CPU
+		{50B2631D-129C-47B3-A587-029CCD6099BC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{50B2631D-129C-47B3-A587-029CCD6099BC}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{50B2631D-129C-47B3-A587-029CCD6099BC}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{50B2631D-129C-47B3-A587-029CCD6099BC}.Release|Any CPU.Build.0 = Release|Any CPU
+		{42F719ED-8413-4895-B5B4-5AB56079BC66}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{42F719ED-8413-4895-B5B4-5AB56079BC66}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{42F719ED-8413-4895-B5B4-5AB56079BC66}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{42F719ED-8413-4895-B5B4-5AB56079BC66}.Release|Any CPU.Build.0 = Release|Any CPU
+		{520659C8-C734-4298-A3DA-B539DB9DFC0B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{520659C8-C734-4298-A3DA-B539DB9DFC0B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{520659C8-C734-4298-A3DA-B539DB9DFC0B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{520659C8-C734-4298-A3DA-B539DB9DFC0B}.Release|Any CPU.Build.0 = Release|Any CPU
+		{4164BDF7-F527-4E85-9CE6-E3C2D7426A27}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{4164BDF7-F527-4E85-9CE6-E3C2D7426A27}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{4164BDF7-F527-4E85-9CE6-E3C2D7426A27}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{4164BDF7-F527-4E85-9CE6-E3C2D7426A27}.Release|Any CPU.Build.0 = Release|Any CPU
+		{3B5A0094-670D-4BB1-BFDD-61B88A8773DC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3B5A0094-670D-4BB1-BFDD-61B88A8773DC}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3B5A0094-670D-4BB1-BFDD-61B88A8773DC}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3B5A0094-670D-4BB1-BFDD-61B88A8773DC}.Release|Any CPU.Build.0 = Release|Any CPU
+		{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81}.Release|Any CPU.Build.0 = Release|Any CPU
+		{91853F21-9CD9-4132-BC29-A7D5D84FFFE7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{91853F21-9CD9-4132-BC29-A7D5D84FFFE7}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{91853F21-9CD9-4132-BC29-A7D5D84FFFE7}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{91853F21-9CD9-4132-BC29-A7D5D84FFFE7}.Release|Any CPU.Build.0 = Release|Any CPU
+		{E512F4D9-9375-480F-A2F6-A46509F9D824}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E512F4D9-9375-480F-A2F6-A46509F9D824}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E512F4D9-9375-480F-A2F6-A46509F9D824}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E512F4D9-9375-480F-A2F6-A46509F9D824}.Release|Any CPU.Build.0 = Release|Any CPU
+		{EF480016-9127-4916-8735-D2466BDBC582}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{EF480016-9127-4916-8735-D2466BDBC582}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{EF480016-9127-4916-8735-D2466BDBC582}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{EF480016-9127-4916-8735-D2466BDBC582}.Release|Any CPU.Build.0 = Release|Any CPU
+		{AA94D832-1CCC-4715-95A9-A483F23A1A5D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{AA94D832-1CCC-4715-95A9-A483F23A1A5D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{AA94D832-1CCC-4715-95A9-A483F23A1A5D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{AA94D832-1CCC-4715-95A9-A483F23A1A5D}.Release|Any CPU.Build.0 = Release|Any CPU
+		{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D}.Release|Any CPU.Build.0 = Release|Any CPU
+		{27B2DDC7-8B75-4322-A312-25419C15D9D8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{27B2DDC7-8B75-4322-A312-25419C15D9D8}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{27B2DDC7-8B75-4322-A312-25419C15D9D8}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{27B2DDC7-8B75-4322-A312-25419C15D9D8}.Release|Any CPU.Build.0 = Release|Any CPU
+		{CEBD131C-0B70-4BBF-99C5-47E2EB415554}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{CEBD131C-0B70-4BBF-99C5-47E2EB415554}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{CEBD131C-0B70-4BBF-99C5-47E2EB415554}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{CEBD131C-0B70-4BBF-99C5-47E2EB415554}.Release|Any CPU.Build.0 = Release|Any CPU
+		{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6C032DF5-C957-468F-A4C9-CA8167508DEF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6C032DF5-C957-468F-A4C9-CA8167508DEF}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6C032DF5-C957-468F-A4C9-CA8167508DEF}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6C032DF5-C957-468F-A4C9-CA8167508DEF}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(NestedProjects) = preSolution
+		{554AD327-6DBA-4F8F-96F8-81CE7A0C863F} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{1A94A50E-06DC-43C1-80B5-B662820EC3EB} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{C956DD76-69C8-4A9C-83EA-D17DF83340FD} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{50B2631D-129C-47B3-A587-029CCD6099BC} = {04DBDB01-70F4-4E06-B468-8F87850B22BE}
+		{42F719ED-8413-4895-B5B4-5AB56079BC66} = {3BF71760-5526-4089-8A43-ED8430847906}
+		{520659C8-C734-4298-A3DA-B539DB9DFC0B} = {3BF71760-5526-4089-8A43-ED8430847906}
+		{4164BDF7-F527-4E85-9CE6-E3C2D7426A27} = {3BF71760-5526-4089-8A43-ED8430847906}
+		{3B5A0094-670D-4BB1-BFDD-61B88A8773DC} = {3BF71760-5526-4089-8A43-ED8430847906}
+		{1FE30EB9-74A9-47F5-A9F6-7B1FAB672D81} = {04DBDB01-70F4-4E06-B468-8F87850B22BE}
+		{91853F21-9CD9-4132-BC29-A7D5D84FFFE7} = {04DBDB01-70F4-4E06-B468-8F87850B22BE}
+		{E512F4D9-9375-480F-A2F6-A46509F9D824} = {04DBDB01-70F4-4E06-B468-8F87850B22BE}
+		{EF480016-9127-4916-8735-D2466BDBC582} = {04DBDB01-70F4-4E06-B468-8F87850B22BE}
+		{AA94D832-1CCC-4715-95A9-A483F23A1A5D} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{748584B1-BA69-4F6A-81AA-F4BDE6BCE29D} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{27B2DDC7-8B75-4322-A312-25419C15D9D8} = {15E62D85-34D1-44EE-9C43-AD3CC8D8558D}
+		{3BF71760-5526-4089-8A43-ED8430847906} = {CA9AC87F-097E-4F15-8393-4BC07735A5B0}
+		{CA3CC1A0-79B8-4B7B-8180-9A355B3856F7} = {CA9AC87F-097E-4F15-8393-4BC07735A5B0}
+		{15E62D85-34D1-44EE-9C43-AD3CC8D8558D} = {CA9AC87F-097E-4F15-8393-4BC07735A5B0}
+		{CEBD131C-0B70-4BBF-99C5-47E2EB415554} = {CA3CC1A0-79B8-4B7B-8180-9A355B3856F7}
+		{9EC53C30-FD0C-4DA2-958F-A7F5E277CE7C} = {3BF71760-5526-4089-8A43-ED8430847906}
+		{6C032DF5-C957-468F-A4C9-CA8167508DEF} = {15E62D85-34D1-44EE-9C43-AD3CC8D8558D}
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {28315BFD-90E7-4E14-A2EA-F3D23AF4126F}
+	EndGlobalSection
+EndGlobal
--- a/Sinet.Universal.Admin.sln.DotSettings
+++ b/Sinet.Universal.Admin.sln.DotSettings
@ -0,0 +1,23 @@
+<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+	<s:Boolean x:Key="/Default/CodeEditing/Intellisense/CodeCompletion/IntelliSenseCompletingCharacters/CSharpCompletingCharacters/UpgradedFromVSSettings/@EntryValue">True</s:Boolean>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceDoWhileStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceFixedStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceForeachStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceForStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceIfStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceLockStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceUsingStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeInspection/Highlighting/InspectionSeverities/=EnforceWhileStatementBraces/@EntryIndexedValue">WARNING</s:String>
+	<s:String x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_FOR_FOR/@EntryValue">Required</s:String>
+	<s:String x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_FOR_FOREACH/@EntryValue">Required</s:String>
+	<s:String x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_FOR_IFELSE/@EntryValue">Required</s:String>
+	<s:String x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_FOR_WHILE/@EntryValue">Required</s:String>
+	<s:Boolean x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_REDUNDANT/@EntryValue">False</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeStyle/Generate/=Implementations/@KeyIndexDefined">True</s:Boolean>
+	<s:String x:Key="/Default/CodeStyle/Generate/=Implementations/Options/=Async/@EntryIndexedValue">False</s:String>
+	<s:String x:Key="/Default/CodeStyle/Generate/=Implementations/Options/=Mutable/@EntryIndexedValue">False</s:String>
+	<s:Boolean x:Key="/Default/CodeStyle/Generate/=Overrides/@KeyIndexDefined">True</s:Boolean>
+	<s:String x:Key="/Default/CodeStyle/Generate/=Overrides/Options/=Async/@EntryIndexedValue">False</s:String>
+	<s:String x:Key="/Default/CodeStyle/Generate/=Overrides/Options/=Mutable/@EntryIndexedValue">False</s:String>
+	<s:String x:Key="/Default/CodeStyle/Naming/CSharpNaming/Abbreviations/=SQL/@EntryIndexedValue">SQL</s:String>
+</wpf:ResourceDictionary>
--- a/common.props
+++ b/common.props
@ -0,0 +1,19 @@
+<Project>
+  <PropertyGroup>
+    <LangVersion>latest</LangVersion>
+    <Version>1.0.0</Version>
+    <NoWarn>$(NoWarn);CS1591</NoWarn>
+	<AbpProjectType>app</AbpProjectType>
+  </PropertyGroup>
+
+  <Target Name="NoWarnOnRazorViewImportedTypeConflicts" BeforeTargets="RazorCoreCompile">
+    <PropertyGroup>
+      <NoWarn>$(NoWarn);0436</NoWarn>
+    </PropertyGroup>
+  </Target>
+
+  <ItemGroup>
+    <Content Remove="$(UserProfile)\.nuget\packages\*\*\contentFiles\any\*\*.abppkg*.json" />
+  </ItemGroup>
+
+</Project>
--- a/src/client/Sinet.Universal.Admin.Blazor/AdminBlazorAutoMapperProfile.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/AdminBlazorAutoMapperProfile.cs
@ -0,0 +1,11 @@
+using AutoMapper;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+public class AdminBlazorAutoMapperProfile : Profile
+{
+    public AdminBlazorAutoMapperProfile()
+    {
+        //Define your AutoMapper configuration here for the Blazor project.
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/AdminBlazorModule.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/AdminBlazorModule.cs
@ -0,0 +1,106 @@
+using System;
+using System.Net.Http;
+using Blazorise.Bootstrap5;
+using Blazorise.Icons.FontAwesome;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Sinet.Universal.Admin.Blazor.Menus;
+using OpenIddict.Abstractions;
+using Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme;
+using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
+using Volo.Abp.AspNetCore.Components.Web.Theming.Routing;
+using Volo.Abp.Autofac.WebAssembly;
+using Volo.Abp.AutoMapper;
+using Volo.Abp.Modularity;
+using Volo.Abp.UI.Navigation;
+using Volo.Abp.Identity.Blazor.WebAssembly;
+using Volo.Abp.SettingManagement.Blazor.WebAssembly;
+using Volo.Abp.TenantManagement.Blazor.WebAssembly;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+[DependsOn(
+    typeof(AbpAutofacWebAssemblyModule),
+    typeof(AdminHttpApiClientModule),
+    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule),
+    typeof(AbpIdentityBlazorWebAssemblyModule),
+    typeof(AbpTenantManagementBlazorWebAssemblyModule),
+    typeof(AbpSettingManagementBlazorWebAssemblyModule)
+)]
+public class AdminBlazorModule : AbpModule
+{
+    public override void ConfigureServices(ServiceConfigurationContext context)
+    {
+        var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>();
+        var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
+
+        ConfigureAuthentication(builder);
+        ConfigureHttpClient(context, environment);
+        ConfigureBlazorise(context);
+        ConfigureRouter(context);
+        ConfigureUI(builder);
+        ConfigureMenu(context);
+        ConfigureAutoMapper(context);
+    }
+
+    private void ConfigureRouter(ServiceConfigurationContext context)
+    {
+        Configure<AbpRouterOptions>(options =>
+        {
+            options.AppAssembly = typeof(AdminBlazorModule).Assembly;
+        });
+    }
+
+    private void ConfigureMenu(ServiceConfigurationContext context)
+    {
+        Configure<AbpNavigationOptions>(options =>
+        {
+            options.MenuContributors.Add(new AdminMenuContributor(context.Services.GetConfiguration()));
+        });
+    }
+
+    private void ConfigureBlazorise(ServiceConfigurationContext context)
+    {
+        context.Services
+            .AddBootstrap5Providers()
+            .AddFontAwesomeIcons();
+    }
+
+    private static void ConfigureAuthentication(WebAssemblyHostBuilder builder)
+    {
+        builder.Services.AddOidcAuthentication(options =>
+        {
+            builder.Configuration.Bind("AuthServer", options.ProviderOptions);
+            options.UserOptions.NameClaim = OpenIddictConstants.Claims.Name;
+            options.UserOptions.RoleClaim = OpenIddictConstants.Claims.Role;
+
+            options.ProviderOptions.DefaultScopes.Add("Admin");
+            options.ProviderOptions.DefaultScopes.Add("roles");
+            options.ProviderOptions.DefaultScopes.Add("email");
+            options.ProviderOptions.DefaultScopes.Add("phone");
+        });
+    }
+
+    private static void ConfigureUI(WebAssemblyHostBuilder builder)
+    {
+        builder.RootComponents.Add<App>("#ApplicationContainer");
+
+    }
+
+    private static void ConfigureHttpClient(ServiceConfigurationContext context, IWebAssemblyHostEnvironment environment)
+    {
+        context.Services.AddTransient(sp => new HttpClient
+        {
+            BaseAddress = new Uri(environment.BaseAddress)
+        });
+    }
+
+    private void ConfigureAutoMapper(ServiceConfigurationContext context)
+    {
+        Configure<AbpAutoMapperOptions>(options =>
+        {
+            options.AddMaps<AdminBlazorModule>();
+        });
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/AdminBrandingProvider.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/AdminBrandingProvider.cs
@ -0,0 +1,10 @@
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Ui.Branding;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+[Dependency(ReplaceServices = true)]
+public class AdminBrandingProvider : DefaultBrandingProvider
+{
+    public override string AppName => "Admin";
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/AdminBundleContributor.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/AdminBundleContributor.cs
@ -0,0 +1,19 @@
+using Volo.Abp.Bundling;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+/* Add your global styles/scripts here.
+ * See https://docs.abp.io/en/abp/latest/UI/Blazor/Global-Scripts-Styles to learn how to use it
+ */
+public class AdminBundleContributor : IBundleContributor
+{
+    public void AddScripts(BundleContext context)
+    {
+
+    }
+
+    public void AddStyles(BundleContext context)
+    {
+        context.Add("main.css", true);
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/AdminComponentBase.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/AdminComponentBase.cs
@ -0,0 +1,12 @@
+using Sinet.Universal.Admin.Localization;
+using Volo.Abp.AspNetCore.Components;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+public abstract class AdminComponentBase : AbpComponentBase
+{
+    protected AdminComponentBase()
+    {
+        LocalizationResource = typeof(AdminResource);
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Menus/AdminMenuContributor.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/Menus/AdminMenuContributor.cs
@ -0,0 +1,85 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Sinet.Universal.Admin.Localization;
+using Sinet.Universal.Admin.MultiTenancy;
+using Volo.Abp.Account.Localization;
+using Volo.Abp.Authorization.Permissions;
+using Volo.Abp.Identity.Blazor;
+using Volo.Abp.SettingManagement.Blazor.Menus;
+using Volo.Abp.TenantManagement.Blazor.Navigation;
+using Volo.Abp.UI.Navigation;
+using Volo.Abp.Users;
+
+namespace Sinet.Universal.Admin.Blazor.Menus;
+
+public class AdminMenuContributor : IMenuContributor
+{
+    private readonly IConfiguration _configuration;
+
+    public AdminMenuContributor(IConfiguration configuration)
+    {
+        _configuration = configuration;
+    }
+
+    public async Task ConfigureMenuAsync(MenuConfigurationContext context)
+    {
+        if (context.Menu.Name == StandardMenus.Main)
+        {
+            await ConfigureMainMenuAsync(context);
+        }
+        else if (context.Menu.Name == StandardMenus.User)
+        {
+            await ConfigureUserMenuAsync(context);
+        }
+    }
+
+    private Task ConfigureMainMenuAsync(MenuConfigurationContext context)
+    {
+        var l = context.GetLocalizer<AdminResource>();
+
+        context.Menu.Items.Insert(
+            0,
+            new ApplicationMenuItem(
+                AdminMenus.Home,
+                l["Menu:Home"],
+                "/",
+                icon: "fas fa-home"
+            )
+        );
+     
+        var administration = context.Menu.GetAdministration();
+
+        if (MultiTenancyConsts.IsEnabled)
+        {
+            administration.SetSubItemOrder(TenantManagementMenuNames.GroupName, 1);
+        }
+        else
+        {
+            administration.TryRemoveMenuItem(TenantManagementMenuNames.GroupName);
+        }
+
+        administration.SetSubItemOrder(IdentityMenuNames.GroupName, 2);
+        administration.SetSubItemOrder(SettingManagementMenus.GroupName, 3);
+
+        return Task.CompletedTask;
+    }
+
+    private Task ConfigureUserMenuAsync(MenuConfigurationContext context)
+    {
+        var accountStringLocalizer = context.GetLocalizer<AccountResource>();
+
+        var authServerUrl = _configuration["AuthServer:Authority"] ?? "";
+
+        context.Menu.AddItem(new ApplicationMenuItem(
+            "Account.Manage",
+            accountStringLocalizer["MyAccount"],
+            $"{authServerUrl.EnsureEndsWith('/')}Account/Manage?returnUrl={_configuration["App:SelfUrl"]}",
+            icon: "fa fa-cog",
+            order: 1000,
+            null).RequireAuthenticated());
+
+        return Task.CompletedTask;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Menus/AdminMenus.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/Menus/AdminMenus.cs
@ -0,0 +1,10 @@
+namespace Sinet.Universal.Admin.Blazor.Menus;
+
+public class AdminMenus
+{
+    private const string Prefix = "Admin";
+    public const string Home = Prefix + ".Home";
+
+    //Add your menu items here...
+
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor
+++ b/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor
@ -0,0 +1,179 @@
+@page "/"
+@using Volo.Abp.MultiTenancy
+@inherits AdminComponentBase
+@inject AuthenticationStateProvider AuthenticationStateProvider
+<div class="container">
+    <div class="p-5 text-center">
+        <Badge Color="Color.Success" class="mb-4">
+            <h5 class="m-1"> <i class="fas fa-rocket"></i> Congratulations, <strong>Admin</strong> is successfully running!</h5>
+        </Badge>
+
+        <h1>Welcome to the Application</h1>
+
+        <p class="lead px-lg-5 mx-lg-5">@L["LongWelcomeMessage"]</p>
+
+        @if ( !CurrentUser.IsAuthenticated )
+        {
+            <a class="btn btn-primary" href="/authentication/login">
+                <i class="fa fa-sign-in-alt"></i> @L["Login"]
+            </a>
+        }
+    </div>
+
+    <div class="card">
+        <div class="card-body">
+            <div class="row">
+                <div class="col-md-auto text-center">
+                    <img src="https://abp.io/assets/png/mastering-abp-framework.webp" style="max-width: 400px;" class="w-100 mb-5 my-md-3">
+                </div>
+                <div class="col-md d-flex align-items-center">
+                    <div class="pe-0 pe-md-4">
+                        <small class="text-uppercase text-muted">THE OFFICIAL GUIDE</small>
+                        <h2 class="mb-4">Mastering ABP Framework</h2>
+                        <p class="mb-4">Written by the creator of the ABP Framework, this book will help you gain a complete understanding of the framework and modern web application development techniques.</p>
+                        <div class="mb-4">
+                            <a href="https://www.amazon.com/gp/product/B097Z2DM8Q/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0" class="btn btn-success mb-1">
+                                Buy on Amazon US
+                            </a>
+                            <a href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242" class="btn btn-primary mb-1">
+                                Buy on PACKT
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="my-3 text-center">
+        <h3>Let's improve your application!</h3>
+        <p>Here are some links to help you get started:</p>
+    </div>
+
+    <div class="card mt-4 mb-5">
+        <div class="card-body">
+            <div class="row text-center justify-content-md-center">
+                <div class="col-lg-4">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fas fa-book text-secondary d-block my-3 fa-2x"></i> Learn the ABP Framework</h5>
+                        <p>Explore the compherensive documentation to learn how to build a modern web application.</p>
+                        <a href="https://docs.abp.io/en/abp/latest?ref=tmpl" target="_blank" class="btn btn-link px-1">See Documents <i class="fas fa-chevron-right"></i></a>
+                    </div>
+                </div>
+                <div class="col-lg-4 border-start">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> Samples</h5>
+                        <p>See the example projects built with the ABP Framework.</p>
+                        <a href="https://docs.abp.io/en/abp/latest/Samples/Index?ref=tmpl" target="_blank" class="btn btn-link px-1">All samples <i class="fas fa-chevron-right"></i></a>
+                    </div>
+                </div>
+                <div class="col-lg-4 border-start">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fas fa-users text-secondary d-block my-3 fa-2x"></i> ABP Community</h5>
+                        <p>Get involved with a vibrant community and become a contributor.</p>
+                        <a href="https://community.abp.io/" target="_blank" class="btn btn-link px-1">Community <i class="fas fa-chevron-right"></i></a>
+                        <a href="https://docs.abp.io/en/abp/latest/Contribution/Index?ref=tmpl" target="_blank" class="btn btn-link px-1">Contribute <i class="fas fa-chevron-right"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="row text-center mt-lg-3 justify-content-md-center">
+                <div class="col-lg-4">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fas fa-pen-nib text-secondary d-block my-3 fa-2x"></i> ABP Blog</h5>
+                        <p>Take a look at our recently published articles.</p>
+                        <a href="https://blog.abp.io/abp?ref=tmpl" target="_blank" class="btn btn-link px-1">See Blog <i class="fas fa-chevron-right"></i></a>
+                    </div>
+                </div>
+                <div class="col-lg-4 border-start">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fab fa-github text-secondary d-block my-3 fa-2x"></i> Github</h5>
+                        <p>Do you love the ABP Framework? Please <strong>give a star</strong> to support it!</p>
+
+                        <a href="https://github.com/abpframework/abp/" target="_blank" class="btn btn-link px-1">See Open Source Framework <i class="fas fa-chevron-right"></i></a>
+
+                    </div>
+                </div>
+                <div class="col-lg-4 border-start">
+                    <div class="p-4">
+                        <h5 class="mb-3"><i class="fab fa-stack-overflow text-secondary d-block my-3 fa-2x"></i> Stackoverflow</h5>
+                        <p>See answers to previously asked questions or ask a new one.</p>
+                        <a href="https://stackoverflow.com/questions/tagged/abp" target="_blank" class="btn btn-link px-1">Questions <i class="fas fa-chevron-right"></i></a>
+                        <a href="https://stackoverflow.com/questions/ask" target="_blank" class="btn btn-link px-1">Ask a Question <i class="fas fa-chevron-right"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-5 my-3 text-center">
+        <h3>Meet the ABP Commercial</h3>
+        <p>A Complete Web Application Platform Built on the ABP Framework</p>
+    </div>
+
+    <div class="card mt-4 mb-5">
+        <div class="card-body">
+            <p class="px-lg-5 mx-lg-5 py-3 text-center">
+                <a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based on the open source ABP framework. It provides pre-built application modules,
+                rapid application development tooling, professional UI themes, premium support and more.
+            </p>
+
+            <div class="row text-center justify-content-md-center">
+                <div class="col-lg-2">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Startup Templates
+                            <a href="https://commercial.abp.io/startup-templates?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+                <div class="col-lg-2 border-start">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Application Modules
+                            <a href="https://commercial.abp.io/modules?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+                <div class="col-lg-2 border-start">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Developer<br />Tools
+                            <a href="https://commercial.abp.io/tools?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+                <div class="col-lg-2 border-start">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> UI<br /> Themes
+                            <a href="https://commercial.abp.io/themes?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+                <div class="col-lg-2 border-start">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Premium Support
+                            <a href="https://support.abp.io/QA/Questions?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+                <div class="col-lg-2 border-start">
+                    <div class="p-3">
+                        <h6>
+                            <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> Additional Services
+                            <a href="https://commercial.abp.io/additional-services?ref=tmpl" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i class="fas fa-chevron-right"></i></a>
+                        </h6>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="mb-5 text-center">
+        <p class="align-middle">
+            <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"><i class="fab fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a>
+            <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"><i class="fab fa-twitter"></i><span class="text-secondary"> Abp Commercial</span></a>
+            <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"><i class="fab fa-github"></i><span class="text-secondary"> abpframework</span></a>
+        </p>
+    </div>
+</div>
--- a/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor.cs
@ -0,0 +1,6 @@
+namespace Sinet.Universal.Admin.Blazor.Pages;
+
+public partial class Index
+{
+
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor.css
+++ b/src/client/Sinet.Universal.Admin.Blazor/Pages/Index.razor.css
@ -0,0 +1 @@
+/* Write here your styles for the Index page */
--- a/src/client/Sinet.Universal.Admin.Blazor/Program.cs
+++ b/src/client/Sinet.Universal.Admin.Blazor/Program.cs
@ -0,0 +1,23 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+
+namespace Sinet.Universal.Admin.Blazor;
+
+public class Program
+{
+    public async static Task Main(string[] args)
+    {
+        var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+        var application = await builder.AddApplicationAsync<AdminBlazorModule>(options =>
+        {
+            options.UseAutofac();
+        });
+
+        var host = builder.Build();
+
+        await application.InitializeApplicationAsync(host.Services);
+
+        await host.RunAsync();
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Properties/launchSettings.json
+++ b/src/client/Sinet.Universal.Admin.Blazor/Properties/launchSettings.json
@ -0,0 +1,29 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "https://localhost:44372",
+      "sslPort": 44372
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Sinet.Universal.Admin.Blazor": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:44372",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/Sinet.Universal.Admin.Blazor.csproj
+++ b/src/client/Sinet.Universal.Admin.Blazor/Sinet.Universal.Admin.Blazor.csproj
@ -0,0 +1,37 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <Import Project="..\..\..\common.props" />
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Blazorise.Bootstrap5" Version="1.3.1" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.3.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.10" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme" Version="2.4.*-*" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Volo.Abp.Autofac.WebAssembly" Version="7.4.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Volo.Abp.Identity.Blazor.WebAssembly" Version="7.4.1" />
+    <PackageReference Include="Volo.Abp.TenantManagement.Blazor.WebAssembly" Version="7.4.1" />
+    <PackageReference Include="Volo.Abp.SettingManagement.Blazor.WebAssembly" Version="7.4.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\common\Sinet.Universal.Admin.HttpApi.Client\Sinet.Universal.Admin.HttpApi.Client.csproj" />
+  </ItemGroup>
+
+
+</Project>
--- a/src/client/Sinet.Universal.Admin.Blazor/_Imports.razor
+++ b/src/client/Sinet.Universal.Admin.Blazor/_Imports.razor
@ -0,0 +1,14 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Volo.Abp.AspNetCore.Components.Web
+@using Sinet.Universal.Admin.Blazor
+@using Blazorise
+@using Blazorise.DataGrid
+@using Volo.Abp.BlazoriseUI
+@using Volo.Abp.BlazoriseUI.Components
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/appsettings.Development.json
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/appsettings.Development.json
@ -0,0 +1,3 @@
+{
+
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/appsettings.json
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/appsettings.json
@ -0,0 +1,24 @@
+{
+  "App": {
+    "SelfUrl": "https://localhost:44372"
+  },
+  "AuthServer": {
+    "Authority": "https://localhost:44333",
+    "ClientId": "Admin_Blazor",
+    "ResponseType": "code"
+  },
+  "RemoteServices": {
+    "Default": {
+      "BaseUrl": "https://localhost:44333"
+    }
+  },
+  "AbpCli": {
+    "Bundle": {
+      "Mode": "BundleAndMinify", /* Options: None, Bundle, BundleAndMinify */
+      "Name": "global",
+      "Parameters": {
+
+      }
+    }
+  }
+}
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/favicon.ico
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/favicon.ico
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/global.css
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/global.css
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/global.js
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/global.js
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-dark-thumbnail.png
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-dark-thumbnail.png
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-dark.png
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-dark.png
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-light-thumbnail.png
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-light-thumbnail.png
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-light.png
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/images/logo/leptonx/logo-light.png
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/index.html
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Sinet.Universal.Admin.Blazor</title>
+    <base href="/" />
+
+    <!--ABP:Styles-->
+    <link href="global.css?_v=638289244910528761" rel="stylesheet"/>
+    <link href="main.css" rel="stylesheet"/>
+    <!--/ABP:Styles-->
+    <link href="Sinet.Universal.Admin.Blazor.styles.css" rel="stylesheet"/>
+    
+</head>
+
+<body class="abp-application-layout bg-light">
+    <div id="ApplicationContainer">
+        <div class="spinner">
+            <div class="double-bounce1"></div>
+            <div class="double-bounce2"></div>
+        </div>
+    </div>
+
+    <!--ABP:Scripts-->
+    <script src="global.js?_v=638289244912430522"></script>
+    <!--/ABP:Scripts-->
+
+</body>
+</html>
--- a/src/client/Sinet.Universal.Admin.Blazor/wwwroot/main.css
+++ b/src/client/Sinet.Universal.Admin.Blazor/wwwroot/main.css
@ -0,0 +1,55 @@
+/* Global styles for the Admin application */
+
+:root .lpx-brand-logo {
+    --lpx-logo: url('/images/logo/leptonx/logo-light.png');
+    --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    display: block;
+    position: fixed;
+    top: calc( 50% - ( 40px / 2) );
+    right: calc( 50% - ( 40px / 2) );
+}
+
+.double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+    0%, 100% {
+        -webkit-transform: scale(0.0)
+    }
+
+    50% {
+        -webkit-transform: scale(1.0)
+    }
+}
+
+@keyframes sk-bounce {
+    0%, 100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    }
+
+    50% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/App.razor
+++ b/src/client/Sinet.Universal.Admin.Web/App.razor
@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/BasketService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/BasketService.cs
@ -0,0 +1,20 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce;
+
+public static class BasketService
+{
+    public static List<BasketItemDto> GetBasketItems() => new List<BasketItemDto>
+    {
+        new BasketItemDto(1,"Apple Watch Series 5","Apple",4,1,"Delivery by Sun, Nov 28","12% off 3 offers Available",339.99m,"1.png",true),
+        new BasketItemDto(2,"Google - Google Home - White/Slate fabric","Google",4,1,"Delivery by Wed, Dec 1","16% off 1 offers Available",129.29m,"7.png",true),
+        new BasketItemDto(3,"Apple iPhone 11 (64GB, Black)","Apple",5,1,"Delivery by Thu, Nov 25","8% off 1 offers Available",669.99m,"2.png",true),
+        new BasketItemDto(4,"Apple iMac 27-inch","Apple",4,1,"Delivery by Mon, Nov 29","3% off 4 offers Available",999.99m,"3.png",true),
+        new BasketItemDto(5,"Apple - MacBook Air® (Latest Model) - 13.3\" Display - Silver","Apple",4,1,"Delivery by Sun, Nov 28","17% off 4 offers Available",999.99m,"5.png",false)
+    };
+
+    public static List<AddressTypeDto> GetAddressTypes() => new List<AddressTypeDto>
+    {
+        new AddressTypeDto("Home", "1"),
+        new AddressTypeDto("Work", "2")
+    };
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/AddressDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/AddressDto.cs
@ -0,0 +1,29 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class AddressDto
+{
+    [Required]
+    public string FullName { get; set; } = default!;
+
+    [Required]
+    public string MobileNumber { get; set; } = default!;
+
+    [Required]
+    public string HouseNo { get; set; } = default!;
+
+    [Required]
+    public string Landmark { get; set; } = default!;
+
+    [Required]
+    public string City { get; set; } = default!;
+
+    [Required]
+    public string Pincode { get; set; } = default!;
+
+    [Required]
+    public string State { get; set; } = default!;
+
+    [Required]
+    public string AddressType { get; set; } = default!;
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/AddressTypeDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/AddressTypeDto.cs
@ -0,0 +1,14 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class AddressTypeDto
+{
+    public string Label { get; set; }
+    public string Value { get; set; }
+
+    public AddressTypeDto(string label, string value)
+    {
+        Label = label;
+        Value = value;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/BasketItemDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/BasketItemDto.cs
@ -0,0 +1,49 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class BasketItemDto
+{
+    public BasketItemDto(int id, string name, string company, float score, uint qty, string delivery,
+        string offers, decimal price, string pictureFileName, bool freeShipping)
+    {
+        Id = id;
+        Name = name;
+        Company = company;
+        Score = score;
+        Qty = qty;
+        Delivery = delivery;
+        Offers = offers;
+        Price = price;
+        PictureFileName = pictureFileName;
+        FreeShipping = freeShipping;
+    }
+
+    public int Id { get; set; }
+
+    public string Name { get; set; } = default!;
+
+    public string Company { get; set; } = default!;
+
+    public float Score { get; set; }
+
+    public uint Qty { get; set; }
+
+    public string Delivery { get; set; } = default!;
+
+    public string Offers { get; set; } = "";
+
+    public decimal Price { get; set; }
+
+    public string PictureFileName { get; set; } = "";
+
+    public bool FreeShipping { get; set; }
+
+    public string GetFormatPrice()
+    {
+        return $"${Price}";
+    }
+
+    public string GetPictureUrl()
+    {
+        return $"./img/apps-eCommerce/{PictureFileName}";
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/GoodsDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/GoodsDto.cs
@ -0,0 +1,47 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class GoodsDto
+{
+    public Guid Id { get; init; }
+
+    public string Name { get; init; }
+
+    public string Description { get; init; }
+
+    public double Price { get; init; }
+
+    public string PictureFile { get; init; }
+
+    public string Category { get; set; }
+
+    public int Rating { get; set; }
+
+    public string Brand { get; set; }
+
+    public bool Favorite { get; set; }
+
+    public GoodsDto(string name, double price, string pictureFile, string category, int rating, string brand, string description)
+    {
+        Id = Guid.NewGuid();
+        Name = name;
+        Description = description;
+        Price = price;
+        PictureFile = pictureFile;
+        Category = category;
+        Rating = rating;
+        Brand = brand;
+    }
+
+    public GoodsDto(Guid id,string name, double price, string pictureFile, string category, int rating, string brand, string description)
+    {
+        Id = id;
+        Name = name;
+        Description = description;
+        Price = price;
+        PictureFile = pictureFile;
+        Category = category;
+        Rating = rating;
+        Brand = brand;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/MultiRangeDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/MultiRangeDto.cs
@ -0,0 +1,31 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class MultiRangeDto
+{
+    public MultiRangeDto(RangeType rangeType, string text, double leftNumber, double rightNumber = 0)
+    {
+        RangeType = rangeType;
+        Text = text;
+        LeftNumber = leftNumber;
+        RightNumber = rightNumber;
+    }
+
+    public RangeType RangeType { get; set; }
+
+    public string Text { get; set; }
+
+    public double LeftNumber { get; set; }
+
+    public double RightNumber { get; set; }
+}
+
+public enum RangeType
+{
+    All,
+    Less,
+    LessEqual,
+    More,
+    MoreEqual,
+    Range
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/RelatedGoodsDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/Dto/RelatedGoodsDto.cs
@ -0,0 +1,24 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce.Dto;
+
+public class RelatedGoodsDto
+{
+    public string ImgUrl { get; set; } = default!;
+
+    public string Name { get; set; } = default!;
+
+    public string Brand { get; set; } = default!;
+
+    public int Rating { get; set; }
+
+    public decimal Price { get; set; }
+
+    public RelatedGoodsDto(string name, string brand, string imgUrl, decimal price, int rating)
+    {
+        Name = name;
+        Brand = brand;
+        ImgUrl = imgUrl;
+        Price = price;
+        Rating = rating;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/ShopService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/ECommerce/ShopService.cs
@ -0,0 +1,99 @@
+namespace Sinet.Universal.Admin.Web.Data.App.ECommerce;
+
+public class ShopService
+{
+    static List<GoodsDto> _datas = new ()
+    {
+        new("GA506B 温热管线饮水机",239.99, "/img/apps-eCommerce/15.jpg", "饮水机",5,"LONSID","独特内胆 省电节能 智能触控 时尚科技 人性化操作 界面易懂 电子童锁实用安全 水电自动分离 停水贴心保护。不锈钢内胆：永不生锈，加热快，健康安全、彩灯显示：彩色灯条显示，让喝水成为一种享受。自动停水：连续出水超过1分钟会自动停止出水，防止中途离开出现意外。"),
+        new("朗诗德G3速热管线机",339.99, "img/apps-eCommerce/18.jpg", "饮水机",5,"LONSID","六重智能防护 高原模式 精准控温 硅胶密封设计 休眠模式。适配全通量纯水机：适配全通量纯水机没有频繁起跳的环境噪音，有桶、无桶纯水机都适用。即热即饮：采用速热技术，一次沸腾，避免千滚水。六档精准定制水温：进出水双NTC+可控硅调节精准控温，可满足六种水温需求：25℃常温、55℃泡奶、55℃暖胃温开水、75℃花茶、85℃红茶、95℃咖啡、自动休眠：60s内无任何操作，自动进入休眠模式，节能省电，夜晚不打扰、大小杯设置：小杯 150ml、大杯500ml，走开也能放心接。"),
+        new("朗诗德牌厨下热饮机",139.99, "img/apps-eCommerce/19.jpg", "饮水机",5,"LONSID","纯净热饮，触手可得 多重用水防护，守护家人安全 智能灯环龙头，水温状态一目了然 厨下安装更省空间，体积小更美观 贴心童锁，防止烫伤 高原模式，轻松设置。净享热饮：告别传统烧水模式，打开龙头即可享受纯净热水,四档温度可供选择，满足家庭日常用水需求。多用重水防护：干烧保护，加热超时保护，缺水保护，守护家人安全。智能灯环龙头：常温水、热水对应不同灯环颜色。厨下安装更省空间:体积小更美观。"),
+        new("G1管线饮水机",539.99, "img/apps-eCommerce/16.jpg", "饮水机",5,"LONSID","采用热胆加热方式 出水速度更快 选用优质热胆保温棉 PU材质 选用涂三防漆的PCB板 醒目的琴键式按压开关 可靠性高 可拆卸接水盒 清洗更方便。双重防干烧：温度过高、缺水烧水时，自动停止运行。随时掌握工作状态：动态彩灯实时显示，随时了解工作状态。琴键按压：醒目的琴键式按压开关，可靠性高，红色按压出热水，蓝色出温水。"),
+        new("GT3桌面即热饮水机",539.99, "img/apps-eCommerce/17.jpg", "饮水机",5,"LONSID","童锁 防干烧 多重安全保护 五档温度 选择不同出水温度 3秒即热杜绝反复加热 3.2L大水箱满足全天候饮水需求 旋钮调温 取水操作方便。操作简便：旋钮调温取水，使用只需一旋一按，省去复杂操作步骤，简单易上手。3秒即热 ：3秒即热，杜绝反复加热，畅饮鲜活水。多重保护：童锁、三重防干烧、缺水保护和智能缺水提醒，安全使用更安心。"),
+
+        new("智能除醛空气净化器",339.99, "img/apps-eCommerce/30.jpg", "空净系列",5,"LONSID","优化进风口设计 配以先进的降噪系统 内置工业级球形轴承新科技操纵 高品质静音轮 有效降低转动噪音 隐藏式收纳线 收纳无忧 每一块滤网均内置RFID芯片。分体监控：分离式设计，一体式体验。语音智控：朗朗——语音控制。专效滤网定制：自由定制属于你的空气。"),
+        new("智能语音车载净化器",339.99, "img/apps-eCommerce/31.jpg", "空净系列",5,"LONSID","商务典藏 科技创造 澎湃动力 双倍风压。商务典藏：商务典藏，科技创造。3.6分钟净化一遍：澎湃动力。双倍风压：双倍洁净效果。"),
+        new("空气质量检测仪朗朗",339.99, "img/apps-eCommerce/32.jpg", "空净系列",5,"LONSID","完美视觉交互设计高清LED数字显示 智能语音模块 随时掌握空气状况 甲醛专业级电化学传感器 高精度温度、湿度传感器 内置独立颗粒物激光传感器。精准检测：PM2.5/甲醛/温湿度专业检测。随享智能：空气质量问问朗朗就知道，智能语音播报，不再是冰冷的机器，而是温暖的陪伴。高清LED数显：让每一次呼吸都一目了然。"),
+
+        new("RO一体开水机（双龙头）",339.99, "img/apps-eCommerce/24.jpg", "商务机",5,"LONSID","五级净化 层层过滤 热水随取随有 使用便利 一体式设计 节省空间 加大内胆 持续供应热水。五级净化：五级净化，科学组合净化工艺。步进式加热：真正获得随取随有的热水。一体式设计：节省空间。加大内胆：配备50L热罐，可持续供应热水"),
+        new("悦纯系列商用纯水机",339.99, "img/apps-eCommerce/25.jpg", "商务机",5,"LONSID","超静音制水系统、五级过滤、制水系统高回收率、高效杀菌。自动排空功能：节假日自动排空功能，保证饮水健康卫生。高回收率：制水系统高回收率，回收率大于50%。超静音制水系统：整机噪音小于50dB，强力静音，悦享健康。冷阴极UV杀菌：更安全，更卫生"),
+        new("智爱系列商用直饮机",339.99, "img/apps-eCommerce/27.jpg", "商务机",5,"LONSID","超静音制水系统、五级过滤、制水系统高回收率、高效杀菌。多重安全保护：防漏电、防缺水、防干烧、防烫伤。智能显示：制水时间监控、滤芯寿命显示，IMD电控显示面板，机器运行状态一目了然。高回收率：制水系统高回收率，回收率大于50%。超静音制水系统：整机噪音小于50dB，强力静音，悦享健康。冷阴极UV杀菌：饮水更安全，更卫生"),
+        new("净雅系列商用直饮机",339.99, "img/apps-eCommerce/28.jpg", "商务机",5,"LONSID","超静音制水系统、五级过滤、制水系统高回收率、高效杀菌。冷阴极UV杀菌（净雅500）：更安全，更卫生。超静音制水系统：整机噪音小于50dB，强力静音，悦享健康。高回收率：制水系统高回收率，回收率大于50%。多方监控：制水时间监控、滤芯寿命显示，IMD电控显示面板，机器运行状态一目了然。多重安全保护：防漏电、防缺水、防干烧、防烫伤。UVC-LED抑菌（净雅100）：安全卫生"),
+        new("豪华商用纯水机",339.99, "img/apps-eCommerce/26.jpg", "商务机",5,"LONSID","五级净化 层层过滤、高效反渗透RO膜技术 纳米级别净化、大流量出水 适合公共场所、奢华品质 精致细节。五级净化：五级净化，科学组合净化工艺。高效反渗透膜：高效反渗透RO膜过滤技术，有效过滤有害物质。大流量出水：大流量出水，满足多人。精致细节：精致仪表盘，及时掌控机器状态。"),
+        new("智爱100商用直饮机",339.99, "img/apps-eCommerce/29.jpg", "商务机",5,"LONSID","超静音制水系统、五级过滤、制水系统高回收率、高温杀菌。开水热交换系统：饮水更安全，更卫生、多重安全保护：防漏电、防缺水、防干烧、防烫伤。智能显示：制水时间监控滤芯寿命显示，IMD电控显示面板，机器运行状态一目了然。高回收率：制水系统高回收率，回收率大于50%。超静音制水系统：整机噪音小于50dB，强力静音，悦享健康。"),
+
+        new("饮立方",339.99, "img/apps-eCommerce/20.jpg", "胶囊机",5,"LONSID","纤薄机身，小巧免安装，通电即用。智能精准,定义不同饮品最佳口感。茶胶囊可多次冲泡，家人朋友聚会齐分享。胶囊结构充氮和隔氧保鲜设计，久置冲泡亦可即刻感受香醇。高原模式，系统自动调节冲泡条件，保障不同地区使用的最佳口感。纤薄小巧：小巧免安装 随心放。智能提醒：冲泡状态一目了然。高原模式：高原模式。一茶多泡：一茶多泡 经济实惠。保持新鲜：告别变质 独立封装"),
+        new("饮立方PLUS",339.99, "img/apps-eCommerce/21.jpg", "胶囊机",5,"LONSID","复合滤芯防伪设计。三机一体，定义智饮新时代。饮品智能扫码萃取，精准定义最佳口感。胶囊结构充氮和隔氧保鲜设计，即刻感受饮品香醇。茶胶囊可多次冲泡，家人朋友聚会齐分享。 保持新鲜：告别变质 独立封装。一茶多泡：一茶多泡 经济实惠。智能识别：智能识别最佳冲泡条件。"),
+
+        new("云湃智能物联纯水机",339.99, "img/apps-eCommerce/8.jpg", "纯水机",5,"LONSID","3合1一体式专利复合滤芯、智能检测  安全防漏、超静音制水系统。深层过滤：专利复合滤芯和RO反渗透膜，持续过滤更彻底。手机监控：手机端远程便捷操作，随时随地查看机器运行状态。防漏水：一体式水路板，智能检测，降低漏水风险，放心使用。低噪音：噪音低至45分贝，家人尽享美好睡眠。自吸设计：适用于进水水压为0的使用场景，解决无压水源问题（自吸款）"),
+        new("75C-2智能纯水机",339.99, "img/apps-eCommerce/9.jpg", "纯水机",5,"LONSID","进口陶氏RO膜 去除率达90%以上、五层滤芯 科学组合净化工艺、智能显示屏 触摸式按键、阻菌龙头 前置出水口全封闭、半集成水路设计 减少漏水风险。进口RO膜：进口陶氏RO膜，高节水高抗污，放心直饮。五级滤芯：五级过滤，层层过滤，健康饮水。大产水量：75G超大产水量，24小时产水280L，满足全家日常饮用水需求。阻菌龙头：阻菌龙头呵护到口，确保最后一厘米的纯净，保证你入口放心水。智能监控：直观显示滤芯寿命，触摸控制方便快捷。"),
+        new("L3纯水机",339.99, "img/apps-eCommerce/10.jpg", "纯水机",5,"LONSID","高效RO膜滤芯 去除率达90%以上、五层滤芯及科学组合净化工艺、炫彩触摸式按键、独特磁吸设计机身简洁、滤芯智能冲洗 微电脑智能控制。强滤净化：好“芯”制好水，还原净水本味。反渗透过滤：纳米级精度，RO膜反渗透过滤技术，可过滤大部分有害物质，放心直饮。触摸式按键：相对于传统按钮，操作更便捷，全触摸式按键更科技。磁吸设计：人性化智能设计，自动清洗滤芯，对健康升级自动清洗技术可延长滤芯寿命。"),
+        new("L2纯水机",339.99, "img/apps-eCommerce/11.jpg", "纯水机",5,"LONSID","高效RO膜滤芯 去除率达90%以上、精确寿命监控 随时掌控滤芯状况、炫彩触摸式按键、自吸式无需水压、智能化空吸保护。五级净化：好“芯”制好水，还原净水本味。反渗透过滤：纳米级精度，RO膜反渗透过滤技术，可过滤大部分有害物质，放心直饮。触摸式按键：相对于传统按钮，操作更便捷，全触摸式按键更科技。空吸保护：能够防止长时间空吸对高压泵造成的危害。自吸功能：无需水压，特殊设计的高压水泵具有自吸功能，可直接将水吸入机器净化，有效解决净水、地下水、水塔等无水压或水压不稳定的净化。"),
+        new("GXRO80C 杀菌型智能纯水机",339.99, "img/apps-eCommerce/12.jpg", "纯水机",5,"LONSID","高效RO膜滤芯 去除率达90%以上、三级复合滤芯、微电脑控制 智能化保护、触摸式按键 操作更方便、独特杀菌模块 去除二次污染。高精度RO膜：RO膜的孔径非常小,只有水分子及部分有益人体的矿物离子能够通过，放心直饮，净享生活!。精“芯”呵护，体积小巧：三级滤芯，五重净化，精工打造饮水安全保障。"),
+        new("L6纯水机（标准型）",339.99, "img/apps-eCommerce/13.jpg", "纯水机",5,"LONSID","采用600GRO膜 平均8S一杯水、物理阻菌 保证最后一厘米的纯净、嵌入式漏水保护监控更准确、可选择常规模式或节水模式、过流式紫外线杀菌。四级滤芯，六重过滤：优化设计重重过滤，几乎可拦截水中一切污染物。杀菌阻菌，双管齐下：UV冷阴极杀菌灯，物理阻菌龙头，让你喝上放心水。超大流量，集成水路：8S一杯水节省时间，一体式水路减少漏水风险和噪音。节省空间，维护便捷：无桶设计释放厨房空间，无需工具一提一拉秒速换芯。智能屏显，自由选择：屏幕实时选择工作状态，出现漏水强制停机，常规模式节水模式任你选择。"),
+        new("S1纯水机",339.99, "img/apps-eCommerce/14.jpg", "纯水机",5,"LONSID","4合1全新高集成滤芯设计 高端智能按键龙头 1:1超低废水比 安全防伪二维码 高性能紫外线杀菌技术 。机身纤巧：安装不受限。智能双屏：龙头、机身双屏幕显示，水质、滤芯寿命一目了然。集成滤芯：四合一滤芯，省心省力省空间，高抗污染RO膜，滤芯性能更卓越。防伪验证：扫一扫可辨真伪，更换滤芯时，只有二维码被识别后方可更换。"),
+
+        new("R2中央软水机",339.99, "img/apps-eCommerce/3.jpg", "中央处理设备",5,"LONSID","食品卫生安全材料、核心部件安全保障、智慧流量延滞型再生模式、比同类产品省33%再生剂和65%的水、智能自动循环运行。"),
+        new("Q3全自动智能冲洗前置过滤器",339.99, "img/apps-eCommerce/2.jpg", "中央处理设备",5,"LONSID","环保无铅 国标62铜材质、食品级高分子防爆瓶体、滤瓶刮洗 免拆滤芯、万向接头 安装不受限、可拆卸透明窗体。"),
+        new("J2中央净水机",339.99, "img/apps-eCommerce/5.jpg", "中央处理设备",5,"LONSID","高性能高效去除水中余氯、核心部件安全保障、智慧流量延滞型再生模式、比同类产品省33%再生剂和65%的水、智能自动循环运行。"),
+        new("R3中央软水机",339.99, "img/apps-eCommerce/4.jpg", "中央处理设备",5,"LONSID","大流量匹配大用水量、食品级高容量离子交换树脂、省盐省水、大集成智能控制系统、旁通阀设计。"),
+
+        new(Guid.Parse("2d1e3550-5135-50c8-836f-f988bfef91c8"),"Apple Watch Series 5",339.99,"/img/apps-eCommerce/1.png","Cell Phones",5,"Apple","On Retina display that never sleeps, so it’s easy to see the time and other important information, without raising or tapping the display. New location features, from a built-in compass to current elevation, help users better navigate their day, while international emergency calling1 allows customers to call emergency services directly from Apple Watch in over 150 countries, even without iPhone nearby. Apple Watch Series 5 is available in a wider range of materials, including aluminium, stainless steel, ceramic and an all-new titanium."),
+        new("Apple iPhone 11 (65GB, Black)",669.99,"/img/apps-eCommerce/2.png","Cell Phones",5,"Apple","The Apple iPhone 11 is a great smartphone, which was loaded with a lot of quality features. It comes with a waterproof and dustproof body which is the key attraction of the device. The excellent set of cameras offer excellent images as well as capable of recording crisp videos. However, expandable storage and a fingerprint scanner would have made it a perfect option to go for around this price range."),
+        new("Apple iMac 27-inch",999.99,"/img/apps-eCommerce/3.png","Computers & Tablets",5,"Apple","The all-in-one for all. If you can dream it, you can do it on iMac. It’s beautifully & incredibly intuitive and packed with tools that let you take any idea to the next level. And the new 27-inch model elevates the experience in way, with faster processors and graphics, expanded memory and storage, enhanced audio and video capabilities, and an even more stunning Retina 5K display. It’s the desktop that does it all — better and faster than ever."),
+        new("OneOdio A71 Wired Headphones",59.99,"/img/apps-eCommerce/5.png","Audio",3,"OneOdio","Omnidirectional detachable boom mic upgrades the headphones into a professional headset for gaming, business, podcasting and taking calls on the go. Better pick up your voice. Control most electric devices through voice activation, or schedule a ride with Uber and order a pizza. OneOdio A71 Wired Headphones voice-controlled device turns any home into a smart device on a smartphone or tablet."),
+        new("Apple - MacBook Air® (Latest Model) - 13.3 Display - Silver",999.99,"/img/apps-eCommerce/5.png","Computers & Tablets",5,"Apple","MacBook Air is a thin, lightweight laptop from Apple. MacBook Air features up to 8GB of memory, a fifth-generation Intel Core processor, Thunderbolt 2, great built-in apps, and all-day battery life.1 Its thin, light, and durable enough to take everywhere you go-and powerful enough to do everything once you get there, better."),
+        new("Switch Pro Controller",529.99,"/img/apps-eCommerce/6.png","Video Games",3,"Sharp","The Nintendo Switch Pro Controller is one of the priciest baseline controllers in the current console generation, but it's also sturdy, feels good to play with, has an excellent direction pad, and features impressive motion sensors and vibration systems. On top of all of that, it uses Bluetooth, so you don't need an adapter to use it with your PC."),
+        new("Google - Google Home - White/Slate fabric",129.29,"/img/apps-eCommerce/7.png","Audio",5,"Google","Simplify your everyday life with the Google Home, a voice-activated speaker powered by the Google Assistant. Use voice commands to enjoy music, get answers from Google and manage everyday tasks. Google Home is compatible with Android and iOS operating systems, and can control compatible smart devices such as Chromecast or Nest."),
+        new("Sony 5K Ultra HD LED TV",7999.99,"/img/apps-eCommerce/8.png","Computers & Tablets",5,"Apple","Sony 5K Ultra HD LED TV has 5K HDR Support. The TV provides clear visuals and provides distinct sound quality and an immersive experience. This TV has Yes HDMI ports & Yes USB ports. Connectivity options included are HDMI. You can connect various gadgets such as your laptop using the HDMI port. The TV comes with a 1 Year warranty."),
+        new("OnePlus 7 Pro",15.99,"/img/apps-eCommerce/9.png","Cell Phones",5,"Philips","The OnePlus 7 Pro features a brand new design, with a glass back and front and curved sides. The phone feels very premium but’s it’s also very heavy. The Nebula Blue variant looks slick but it’s quite slippery, which makes single-handed use a real challenge. It has a massive 6.67-inch ‘Fluid AMOLED’ display with a QHD+ resolution, 90Hz refresh rate and support for HDR 10+ content. The display produces vivid colours, deep blacks and has good viewing angles."),
+        new("Logitech K380 Wireless Keyboard",81.99,"/img/apps-eCommerce/10.png","Office & School Supplies",5,"Logitech","Logitech K380 Bluetooth Wireless Keyboard gives you the comfort and convenience of desktop typing on your smartphone, and tablet. It is a wireless keyboard that connects to all Bluetooth wireless devices that support external keyboards. Take this compact, lightweight, Bluetooth keyboard anywhere in your home. Type wherever you like, on any compatible computer, phone or tablet."),
+        new("Nike Air Max",81.99,"/img/apps-eCommerce/11.png","Health, Fitness & Beauty",5,"Nike","With a bold application of colorblocking inspired by modern art styles, the Nike Air Max 270 React sneaker is constructed with layers of lightweight material to achieve its artful look and comfortable feel."),
+        new("New Apple iPad Pro",799.99,"/img/apps-eCommerce/12.png","Computers & Tablets",3,"Apple","Up to 10 hours of surﬁng the web on Wi‑Fi, watching video, or listening to music. Up to 9 hours of surﬁng the web using cellular data network, Compatible with Smart Keyboard Folio and Bluetooth keyboards."),
+        new("Vankyo leisure 3 mini projector",99.99,"/img/apps-eCommerce/13.png","TV & Home Theater",2,"Vankyo Store","SUPERIOR VIEWING EXPERIENCE: Supporting 1920x1080 resolution, VANKYO Leisure 3 projector is powered by MStar Advanced Color Engine, which is ideal for home entertainment. 2020 upgraded LED lighting provides a superior viewing experience for you."),
+        new("Wireless Charger 5W Max",10.83,"/img/apps-eCommerce/15.png","Appliances",3,"3M","Charge with case: transmits charging power directly through protective cases. Rubber/plastic/TPU cases under 5 mm thickness . Do not use any magnetic and metal attachments or cards, or it will prevent charging."),
+        new("Laptop Bag",29.99,"/img/apps-eCommerce/15.png","Office & School Supplies",5,"TAS","TSA FRIENDLY- A separate DIGI SMART compartment can hold 15.6 inch Laptop as well as 15 inch, 15 inch Macbook, 12.9 inch iPad, and tech accessories like charger for quick TSA checkpoint when traveling."),
+        new("Adidas Mens Tech Response Shoes",55.59,"/img/apps-eCommerce/16.png","Health, Fitness & Beauty",5,"Adidas","Comfort + performance. Designed with materials that are durable, lightweight and extremely comfortable. Core performance delivers the perfect mix of fit, style and all-around performance."),
+        new("Handbags for Women Large Designer bag",39.99,"/img/apps-eCommerce/17.png","Office & School Supplies",5,"Hobo","Classic Hobo Purse: Top zipper closure, with 2 side zipper pockets design and elegant tassels decoration, fashionable and practical handbags for women, perfect for shopping, dating, travel and business."),
+        new("Oculus Quest All-in-one VR",655,"/img/apps-eCommerce/18.png","TV & Home Theater",1,"Oculus","All-in-one VR: No PC. No wires. No limits. Oculus quest is an all-in-one gaming system built for virtual reality. Now you can play almost anywhere with just a VR headset and controllers. Oculus touch controllers: arm yourself with the award-winning Oculus touch controllers. Your slashes, throws and grab appear in VR with intuitive, realistic Precision, transporting your hands and gestures right into the game"),
+        new("Giotto 32oz Leakproof BPA Free Drinking Water",16.99,"/img/apps-eCommerce/19.png","Health, Fitness & Beauty",5,"3m","With unique inspirational quote and time markers on it,this water bottle is great for measuring your daily intake of water,reminding you stay hydrated and drink enough water throughout the day.A must have for any fitness goals including weight loss,appetite control and overall health."),
+        new("PlayStation 5 Console",339.99,"/img/apps-eCommerce/20.png","Video Games",5,"Sony","All the greatest, games, TV, music and more. Connect with your friends to broadcast and celebrate your epic moments at the press of the Share button to Twitch, YouTube, Facebook and Twitter."),
+        new("Bugani M90 Portable Bluetooth Speaker",56,"/img/apps-eCommerce/20.png","Audio",3,"Bugani","Bluetooth Speakers-The M90 Bluetooth speaker uses the latest Bluetooth 5.0 technology and the latest Bluetooth ATS chip, Connecting over Bluetooth in seconds to iPhone, iPad, Smart-phones, Tablets, Windows, and other Bluetooth devices."),
+        new("Tile Pro - High Performance Bluetooth Tracker",29.99,"/img/apps-eCommerce/22.png","Office & School Supplies",5,"Tile","FIND KEYS, BAGS & MORE -- Pro is our high-performance finder ideal for keys, backpacks, luggage or any other items you want to Favorite track of. The easy-to-use finder and free app work with iOS and Android."),
+        new("Toshiba Canvio Advance 2TB Portable External Hard Drive",69.99,"/img/apps-eCommerce/23.png","Computers & Tablets",2,"Toshiba","Up to 3TB of storage capacity to store your growing files and content."),
+        new("Ronyes Unisex College Bag Bookbags for Women",23.99,"/img/apps-eCommerce/25.png","Office & School Supplies",2,"Ronyes","Made of high quality water-resistant material; padded and adjustable shoulder straps; external USB with built-in charging cable offers a convenient charging"),
+        new("Willful Smart Watch for Men Women 2020",29.99,"/img/apps-eCommerce/25.png","Cell Phones",5,"Willful","Are you looking for a smart watch, which can not only easily Favorite tracking of your steps, calories, heart rate and sleep quality, but also Favorite you informed of incoming calls."),
+        new("Rectangular Polarized, Bluetooth Audio Sunglasses",259,"/img/apps-eCommerce/26.png","Health, Fitness & Beauty",5,"Bose","Redesigned for luxury — Thoughtfully refined and strikingly elegant, the latest Bose sunglasses blend enhanced features and designs for an elevated way to listen."),
+        new("VicTsing Wireless Mouse",10.99,"/img/apps-eCommerce/27.png","Computers & Tablets",3,"VicTsing","After thousands of samples of palm data, we designed this ergonomic mouse. The laptop mouse has a streamlined arc and thumb rest to help reduce the stress caused by prolonged use of the laptop mouse."),
+    };
+
+    public static List<GoodsDto> GetGoodsList() => _datas;
+
+    public static List<GoodsDto> GetRelatedGoodsList() => GetGoodsList().GetRange(0, 10);
+
+    public static List<MultiRangeDto> GetMultiRangeList() => new ()
+    {
+        new(RangeType.All,"All",0),
+        new(RangeType.LessEqual,"<= $10",10),
+        new(RangeType.Range,"$10 - $100",10,100),
+        new(RangeType.Range,"$100 - $500",100,500),
+        new(RangeType.MoreEqual,">=$500",500),
+    };
+
+    public static List<string> GetCategortyList() => new()
+    {
+        "饮水机",
+        "纯水机",
+        "商务机",
+        "胶囊机",
+        "空净系列",
+        "中央处理设备",
+        "Cell Phones",
+    };
+
+    public static List<string> GetBrandList() => new()
+    {
+        "LONSID",
+        "Apple"
+    };
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/BillDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/BillDto.cs
@ -0,0 +1,43 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Invoice.Dto;
+
+public class BillDto
+{
+    public string? Type { get; set; }
+
+    public int Cost { get; set; }
+
+    public int Qty { get; set; }
+
+    public decimal Price { get; set; }
+
+    public string? Remark { get; set; }
+
+    public bool ShowMenu { get; set; }
+
+    public string? Discount { get; set; }
+
+    public int Tax1 { get; set; }
+
+    public int Tax2 { get; set; }
+
+    public BillDto() { }
+
+    public BillDto(string? type, int cost, int qty, decimal price, string? remark)
+    {
+        Type = type;
+        Cost = cost;
+        Qty = qty;
+        Price = price;
+        Remark = remark;
+    }
+
+    public void Set(BillDto bill)
+    {
+        Type = bill.Type;
+        Cost = bill.Cost;
+        Qty = bill.Qty;
+        Price = bill.Price;
+        Remark = bill.Remark;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/InvoiceRecordDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/InvoiceRecordDto.cs
@ -0,0 +1,30 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Invoice.Dto;
+
+public class InvoiceRecordDto
+{
+    public int Id { get; set; }
+
+    public UserDto Client { get; set; }
+
+    public int Total { get; set; }
+
+    public DateOnly Date { get; set; } = DateOnly.FromDateTime(DateTime.Now);
+
+    private DateOnly? _dueDate;
+
+    public DateOnly DueDate 
+    {
+        get => (_dueDate ?? (_dueDate = Date.AddMonths(1).AddDays(2))).Value;
+        set => _dueDate = value;
+    } 
+
+    public int Balance { get; set; }
+
+    public int State { get; set; }
+
+    public InvoiceRecordDto(UserDto client)
+    {
+        Client = client;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/InvoiceStateDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/Dto/InvoiceStateDto.cs
@ -0,0 +1,15 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Invoice.Dto;
+
+public class InvoiceStateDto
+{
+    public string Label { get; set; }
+
+    public int Value { get; set; }
+
+    public InvoiceStateDto(string label, int value)
+    {
+        Label = label;
+        Value = value;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/InvoiceService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Invoice/InvoiceService.cs
@ -0,0 +1,86 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Invoice;
+
+public static class InvoiceService
+{
+    public static List<InvoiceRecordDto> GetInvoiceRecordList() => new()
+    {
+        new InvoiceRecordDto(UserService.GetList()[0]) { Id = 0, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[1]) { Id = 1, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[2]) { Id = 2, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[3]) { Id = 3, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[4]) { Id = 4, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[5]) { Id = 5, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[6]) { Id = 6, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[7]) { Id = 7, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[8]) { Id = 8, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[9]) { Id = 9, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[10]) { Id = 10, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[11]) { Id = 11, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[12]) { Id = 12, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[13]) { Id = 13, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[14]) { Id = 14, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[15]) { Id = 16, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[16]) { Id = 15, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[17]) { Id = 17, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[18]) { Id = 18, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[19]) { Id = 19, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[20]) { Id = 20, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[21]) { Id = 21, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[22]) { Id = 22, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[23]) { Id = 23, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[24]) { Id = 34, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[25]) { Id = 25, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[26]) { Id = 26, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[27]) { Id = 27, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[28]) { Id = 28, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[29]) { Id = 29, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[30]) { Id = 30, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[31]) { Id = 31, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 },
+        new InvoiceRecordDto(UserService.GetList()[32]) { Id = 32, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 2 },
+        new InvoiceRecordDto(UserService.GetList()[33]) { Id = 33, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 3 },
+        new InvoiceRecordDto(UserService.GetList()[34]) { Id = 34, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 4 },
+        new InvoiceRecordDto(UserService.GetList()[35]) { Id = 35, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 5 },
+        new InvoiceRecordDto(UserService.GetList()[36]) { Id = 36, Balance = 205, Total = 3171, Date = DateOnly.FromDateTime(DateTime.Now), State = 1 }
+    };
+
+    public static List<BillDto> GetBillList() => new()
+    {
+        new BillDto("App Design", 24, 1, 24, "Designed UI kit & app pages."),
+        new BillDto("App Customization", 26, 1, 26, "Customization & Bug Fixes."),
+        new BillDto("ABC Template", 28, 1, 28, "Bootstrap 4 admin template."),
+        new BillDto("App Development", 32, 1, 32, "Native App Development."),
+    };
+
+    public static List<InvoiceStateDto> GetStateList() => new()
+    {
+        new InvoiceStateDto("Downloaded", 1),
+        new InvoiceStateDto("Draft", 2),
+        new InvoiceStateDto("Paid", 3),
+        new InvoiceStateDto("Partial Payment", 4),
+        new InvoiceStateDto("Past Due", 5)
+    };
+
+    public static PagingData<InvoiceRecordDto> GetInvoiceRecordList(int pageIndex, int pageSize, int state)
+    {
+        var invoiceRecordList = GetInvoiceRecordList();
+
+        var items = invoiceRecordList
+            .Where(a => a.State == state || state == 0)
+            .OrderBy(a => a.Id)
+            .Skip((pageIndex - 1) * pageSize)
+            .Take(pageSize)
+            .ToList();
+
+        return new PagingData<InvoiceRecordDto>(pageIndex, pageSize, invoiceRecordList.Count, items);
+    }
+
+    public static List<string> GetpaymentMethodList() => new()
+    {
+        "Cash",
+        "Bank Transfer",
+        "Debit",
+        "Credit",
+        "Paypal"
+    };
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/Dto/SelectData.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/Dto/SelectData.cs
@ -0,0 +1,9 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Todo.Dto
+{
+    public class SelectData
+    {
+        public string Label { get; set; } = default!;
+
+        public string Value { get; set; } = default!;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/Dto/TodoDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/Dto/TodoDto.cs
@ -0,0 +1,46 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Todo.Dto;
+
+public class TodoDto
+{
+    public int Id { get; set; }
+
+    public bool IsChecked { get; set; }
+
+    public bool IsImportant { get; set; }
+
+    public bool IsCompleted { get; set; }
+
+    public bool IsDeleted { get; set; }
+
+    [Required]
+    public string Title { get; set; } = "";
+
+    public string Assignee { get; set; } = "";
+
+    public int Avatar { get; set; }
+
+    public DateOnly DueDate { get; set; } = DateOnly.FromDateTime(DateTime.Now);
+
+    [Required]
+    public List<string> Tag { get; set; } = new List<string>();
+
+    public string? Description { get; set; }
+
+    public TodoDto() { }
+
+    public TodoDto(int id, bool isChecked, bool isImportant, bool isCompleted, bool isDeleted, string title, string assignee, int avatar, DateOnly dueDate, List<string> tags, string description)
+    {
+        Id = id;
+        IsChecked = isChecked;
+        IsImportant = isImportant;
+        IsCompleted = isCompleted;
+        IsDeleted = isDeleted;
+        Title = title;
+        Assignee = assignee;
+        Avatar = avatar;
+        DueDate = dueDate;
+        Tag = tags;
+        Description = description;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/TodoService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/Todo/TodoService.cs
@ -0,0 +1,107 @@
+namespace Sinet.Universal.Admin.Web.Data.App.Todo;
+
+public class TodoService
+{
+    public static List<TodoDto> GetList() => new()
+    {
+        new TodoDto(1, false, false, false, false, "汉皇重色思倾国，御宇多年求不得。", "紫萱", 0, new DateOnly(2021, 9, 15), new List<string> { "Low", }, "1、最灵繁的人也看不见自己的背脊。——非洲"),
+        new TodoDto(2, false, false, false, false, "杨家有女初长成，养在深闺人未识。", "若芹", 2, new DateOnly(2021, 9, 16), new List<string> { "Low" }, "2、最困难的事情就是认识自己。——希腊"),
+        new TodoDto(3, true, false, true, false, "天生丽质难自弃，一朝选在君王侧。", "思菱", 5, new DateOnly(2021, 9, 17), new List<string> { "Low" }, "3、有勇气承担命运这才是英雄好汉。——黑塞"),
+        new TodoDto(4, true, false, true, false, "回眸一笑百媚生，六宫粉黛无颜色。", "向秋", 3, new DateOnly(2021, 9, 18), new List<string> { "Low" }, "4、与肝胆人共事，无字句处读书。——周恩来"),
+        new TodoDto(5, true, true, true, false, "春寒赐浴华清池，温泉水滑洗凝脂。", "雨珍", 4, new DateOnly(2021, 9, 19), new List<string> { "Low" }, "5、阅读使人充实，会谈使人敏捷，写作使人精确。——培根"),
+        new TodoDto(6, false, true, false, false, "侍儿扶起娇无力，始是新承恩泽时。", "海瑶", 1, new DateOnly(2021, 9, 20), new List<string> { "High" }, "6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎"),
+        new TodoDto(7, true, true, true, false, "云鬓花颜金步摇，芙蓉帐暖度春宵。", "乐萱", 2, new DateOnly(2021, 9, 21), new List<string> { "High" }, "7、自知之明是最难得的知识。——西班牙"),
+        new TodoDto(8, true, true, false, false, "春宵苦短日高起，从此君王不早朝。", "紫萱", 5, new DateOnly(2021, 9, 22), new List<string> { "High" }, "8、勇气通往天堂，怯懦通往地狱。——塞内加"),
+        new TodoDto(9, true, false, false, false, "承欢侍宴无闲暇，春从春游夜专夜。", "若芹", 3, new DateOnly(2021, 9, 23), new List<string> { "High" }, "9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯"),
+        new TodoDto(10, true, false, false, false, "后宫佳丽三千人，三千宠爱在一身。", "思菱", 1, new DateOnly(2021, 9, 24), new List<string> { "High" }, "10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿"),
+        new TodoDto(11, true, false, true, false, "金屋妆成娇侍夜，玉楼宴罢醉和春。", "向秋", 4, new DateOnly(2021, 9, 25), new List<string> { "High" }, "11、越是没有本领的就越加自命不凡。——邓拓"),
+        new TodoDto(12, true, false, false, false, "姊妹弟兄皆列土，可怜光彩生门户。", "雨珍", 0, new DateOnly(2021, 9, 26), new List<string> { "High" }, "12、越是无能的人，越喜欢挑剔别人的错儿。——爱尔兰"),
+        new TodoDto(13, true, true, false, false, "遂令天下父母心，不重生男重生女。", "海瑶", 5, new DateOnly(2021, 9, 27), new List<string> { "Medium" }, "13、知人者智，自知者明。胜人者有力，自胜者强。——老子"),
+        new TodoDto(14, true, true, false, false, "骊宫高处入青云，仙乐风飘处处闻。", "乐萱", 4, new DateOnly(2021, 9, 28), new List<string> { "Medium" }, "14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德"),
+        new TodoDto(15, true, true, false, false, "缓歌慢舞凝丝竹，尽日君王看不足。", "紫萱", 1, new DateOnly(2021, 9, 29), new List<string> { "Medium" }, "15、最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利"),
+        new TodoDto(16, false, false, false, false, "渔阳鼙鼓动地来，惊破霓裳羽衣曲。", "若芹", 4, new DateOnly(2021, 9, 30), new List<string> { "Medium" }, "16、业余生活要有意义，不要越轨。——华盛顿"),
+        new TodoDto(17, false, true, false, false, "九重城阙烟尘生，千乘万骑西南行。", "思菱", 4, new DateOnly(2021, 10, 1), new List<string> { "Medium" }, "17、一个人即使已登上顶峰，也仍要自强不息。——罗素·贝克"),
+        new TodoDto(18, false, false, false, false, "翠华摇摇行复止，西出都门百余里。", "向秋", 4, new DateOnly(2021, 10, 2), new List<string> { "Medium" }, "18、最大的挑战和突破在于用人，而用人最大的突破在于信任人。——马云"),
+        new TodoDto(19, false, true, false, false, "六军不发无奈何，宛转蛾眉马前死。", "雨珍", 0, new DateOnly(2021, 10, 3), new List<string> { "Medium" }, "19、自己活着，就是为了使别人过得更美好。——雷锋"),
+        new TodoDto(20, false, false, false, false, "花钿委地无人收，翠翘金雀玉搔头。", "海瑶", 0, new DateOnly(2021, 10, 4), new List<string> { "Team" }, "20、要掌握书，莫被书掌握；要为生而读，莫为读而生。——布尔沃"),
+        new TodoDto(21, false, false, false, false, "君王掩面救不得，回看血泪相和流。", "乐萱", 5, new DateOnly(2021, 10, 5), new List<string> { "Team" }, "21、要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根"),
+        new TodoDto(22, false, false, false, false, "黄埃散漫风萧索，云栈萦纡登剑阁。", "紫萱", 4, new DateOnly(2021, 10, 6), new List<string> { "Team" }, "22、业精于勤，荒于嬉；行成于思，毁于随。——韩愈"),
+        new TodoDto(23, true, true, true, false, "峨嵋山下少人行，旌旗无光日色薄。", "若芹", 4, new DateOnly(2021, 10, 7), new List<string> { "Team" }, "23、一切节省，归根到底都归结为时间的节省。——马克思"),
+        new TodoDto(24, false, false, false, false, "蜀江水碧蜀山青，圣主朝朝暮暮情。", "思菱", 4, new DateOnly(2021, 10, 8), new List<string> { "Team" }, "24、意志命运往往背道而驰，决心到最后会全部推倒。——莎士比亚"),
+        new TodoDto(25, true, false, true, false, "行宫见月伤心色，夜雨闻铃肠断声。", "向秋", 1, new DateOnly(2021, 10, 9), new List<string> { "Team" }, "25、学习是劳动，是充满思想的劳动。——乌申斯基"),
+        new TodoDto(26, false, true, false, true, "天旋地转回龙驭，到此踌躇不能去。", "雨珍", 1, new DateOnly(2021, 10, 10), new List<string> { "Team" }, "26、要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭"),
+        new TodoDto(27, true, false, false, false, "马嵬坡下泥土中，不见玉颜空死处。", "海瑶", 2, new DateOnly(2021, 10, 11), new List<string> { "Team" }, "27、只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰"),
+        new TodoDto(28, true, false, true, true, "君臣相顾尽沾衣，东望都门信马归。", "乐萱", 2, new DateOnly(2021, 10, 12), new List<string> { "Low" }, "28、知之者不如好之者，好之者不如乐之者。——孔子"),
+        new TodoDto(29, true, true, false, false, "归来池苑皆依旧，太液芙蓉未央柳。", "紫萱", 1, new DateOnly(2021, 10, 13), new List<string> { "Low" }, "29、勇猛、大胆和坚定的决心能够抵得上武器的精良。——达·芬奇"),
+        new TodoDto(30, true, false, false, false, "芙蓉如面柳如眉，对此如何不泪垂。", "若芹", 5, new DateOnly(2021, 10, 14), new List<string> { "Low" }, "30、意志是一个强壮的盲人，倚靠在明眼的跛子肩上。——叔本华"),
+        new TodoDto(31, true, false, false, false, "春风桃李花开夜，秋雨梧桐叶落时。", "思菱", 1, new DateOnly(2021, 10, 15), new List<string> { "Low" }, "31、只有永远躺在泥坑里的人，才不会再掉进坑里。——黑格尔"),
+        new TodoDto(32, true, false, true, true, "西宫南苑多秋草，落叶满阶红不扫。", "向秋", 3, new DateOnly(2021, 10, 16), new List<string> { "Low" }, "32、希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德"),
+        new TodoDto(33, true, false, false, false, "梨园弟子白发新，椒房阿监青娥老。", "雨珍", 5, new DateOnly(2021, 10, 17), new List<string> { "Low" }, "33、希望是人生的乳母。——科策布"),
+        new TodoDto(34, true, true, true, false, "夕殿萤飞思悄然，孤灯挑尽未成眠。", "海瑶", 1, new DateOnly(2021, 10, 18), new List<string> { "Low" }, "34、形成天才的决定因素应该是勤奋。——郭沫若"),
+        new TodoDto(35, false, false, false, false, "迟迟钟鼓初长夜，耿耿星河欲曙天。", "乐萱", 1, new DateOnly(2021, 10, 19), new List<string> { "High" }, "35、学到很多东西的诀窍，就是一下子不要学很多。——洛克"),
+        new TodoDto(36, false, true, false, true, "鸳鸯瓦冷霜华重，翡翠衾寒谁与共。", "紫萱", 1, new DateOnly(2021, 10, 20), new List<string> { "High" }, "36、自己的鞋子，自己知道紧在哪里。——西班牙"),
+        new TodoDto(37, false, false, false, false, "悠悠生死别经年，魂魄不曾来入梦。", "若芹", 2, new DateOnly(2021, 10, 21), new List<string> { "High" }, "37、我们唯一不会改正的缺点是软弱。——拉罗什福科"),
+        new TodoDto(38, false, false, false, true, "临邛道士鸿都客，能以精诚致魂魄。", "思菱", 0, new DateOnly(2021, 10, 22), new List<string> { "High" }, "38、我这个人走得很慢，但是我从不后退。——亚伯拉罕·林肯"),
+        new TodoDto(39, true, false, true, false, "为感君王辗转思，遂教方士殷勤觅。", "向秋", 1, new DateOnly(2021, 10, 23), new List<string> { "High" }, "39、勿问成功的秘诀为何，且尽全力做你应该做的事吧。——美华纳"),
+        new TodoDto(40, false, false, false, false, "排空驭气奔如电，升天入地求之遍。", "雨珍", 4, new DateOnly(2021, 10, 24), new List<string> { "High" }, "40、学而不思则罔，思而不学则殆。——孔子"),
+        new TodoDto(41, true, true, true, true, "上穷碧落下黄泉，两处茫茫皆不见。", "海瑶", 1, new DateOnly(2021, 10, 25), new List<string> { "High" }, "41、学问是异常珍贵的东西，从任何源泉吸收都不可耻。——阿卜·日·法拉兹"),
+        new TodoDto(42, false, false, false, false, "忽闻海上有仙山，山在虚无缥渺间。", "乐萱", 3, new DateOnly(2021, 10, 26), new List<string> { "High" }, "42、只有在人群中间，才能认识自己。——德国"),
+        new TodoDto(43, false, true, false, false, "楼阁玲珑五云起，其中绰约多仙子。", "紫萱", 5, new DateOnly(2021, 10, 27), new List<string> { "High" }, "43、重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔"),
+        new TodoDto(44, false, false, false, true, "中有一人字太真，雪肤花貌参差是。", "若芹", 1, new DateOnly(2021, 10, 28), new List<string> { "High" }, "44、卓越的人一大优点是：在不利与艰难的遭遇里百折不饶。——贝多芬"),
+        new TodoDto(45, false, false, false, false, "金阙西厢叩玉扃，转教小玉报双成。", "思菱", 2, new DateOnly(2021, 10, 29), new List<string> { "High" }, "45、自己的饭量自己知道。——苏联"),
+        new TodoDto(46, true, false, true, false, "闻道汉家天子使，九华帐里梦魂惊。", "向秋", 2, new DateOnly(2021, 10, 30), new List<string> { "High" }, "46、我们若已接受最坏的，就再没有什么损失。——卡耐基"),
+        new TodoDto(47, false, false, false, false, "揽衣推枕起徘徊，珠箔银屏迤逦开。", "雨珍", 5, new DateOnly(2021, 11, 1), new List<string> { "High" }, "47、书到用时方恨少、事非经过不知难。——陆游"),
+        new TodoDto(48, false, false, false, false, "云鬓半偏新睡觉，花冠不整下堂来。", "海瑶", 1, new DateOnly(2021, 11, 2), new List<string> { "Update" }, "48、书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。——史美尔斯"),
+        new TodoDto(49, true, false, true, false, "风吹仙袂飘飖举，犹似霓裳羽衣舞。", "乐萱", 1, new DateOnly(2021, 11, 3), new List<string> { "Update" }, "49、熟读唐诗三百首，不会作诗也会吟。——孙洙"),
+        new TodoDto(50, true, true, true, false, "玉容寂寞泪阑干，梨花一枝春带雨。", "紫萱", 4, new DateOnly(2021, 11, 4), new List<string> { "Update" }, "50、谁和我一样用功，谁就会和我一样成功。——莫扎特"),
+        new TodoDto(51, true, true, true, false, "含情凝睇谢君王，一别音容两渺茫。", "若芹", 4, new DateOnly(2021, 11, 5), new List<string> { "Update" }, "51、天下之事常成于困约，而败于奢靡。——陆游"),
+        new TodoDto(52, true, true, false, false, "昭阳殿里恩爱绝，蓬莱宫中日月长。", "思菱", 5, new DateOnly(2021, 11, 6), new List<string> { "Update" }, "52、生命不等于是呼吸，生命是活动。——卢梭"),
+        new TodoDto(53, true, true, false, false, "回头下望人寰处，不见长安见尘雾。", "向秋", 1, new DateOnly(2021, 11, 7), new List<string> { "Update" }, "53、伟大的事业，需要决心，能力，组织和责任感。　——易卜生"),
+        new TodoDto(54, true, false, false, false, "惟将旧物表深情，钿合金钗寄将去。", "雨珍", 1, new DateOnly(2021, 11, 8), new List<string> { "Update" }, "54、唯书籍不朽。——乔特"),
+        new TodoDto(55, true, true, true, false, "钗留一股合一扇，钗擘黄金合分钿。", "海瑶", 3, new DateOnly(2021, 11, 9), new List<string> { "Update" }, "55、为中华之崛起而读书。——周恩来"),
+        new TodoDto(56, false, false, false, false, "但令心似金钿坚，天上人间会相见。", "乐萱", 3, new DateOnly(2021, 11, 10), new List<string> { "Update" }, "56、书不仅是生活，而且是现在、过去和未来文化生活的源泉。——库法耶夫"),
+        new TodoDto(57, true, false, false, false, "临别殷勤重寄词，词中有誓两心知。", "紫萱", 1, new DateOnly(2021, 11, 11), new List<string> { "Update" }, "57、生命不可能有两次，但许多人连一次也不善于度过。——吕凯特"),
+        new TodoDto(58, false, false, false, false, "七月七日长生殿，夜半无人私语时。", "若芹", 5, new DateOnly(2021, 11, 12), new List<string> { "Update" }, "58、问渠哪得清如许，为有源头活水来。——朱熹"),
+        new TodoDto(59, true, false, false, false, "在天愿作比翼鸟，在地愿为连理枝。", "思菱", 5, new DateOnly(2021, 11, 13), new List<string> { "Update" }, "59、我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知。——笛卡儿"),
+        new TodoDto(60, true, false, true, false, "天长地久有时尽，此恨绵绵无绝期。", "向秋", 1, new DateOnly(2021, 11, 14), new List<string> { "Update" }, "60、生活的道路一旦选定，就要勇敢地走到底，决不回头。——左拉"),
+    };
+
+    public static List<SelectData> GetAssigneeList() => new()
+    {
+        new SelectData() { Label = "紫萱", Value = "紫萱" },
+        new SelectData() { Label = "若芹", Value = "若芹" },
+        new SelectData() { Label = "思菱", Value = "思菱" },
+        new SelectData() { Label = "向秋", Value = "向秋" },
+        new SelectData() { Label = "雨珍", Value = "雨珍" },
+        new SelectData() { Label = "海瑶", Value = "海瑶" },
+        new SelectData() { Label = "乐萱", Value = "乐萱" },
+    };
+
+    public static List<SelectData> GetTagList() => new()
+    {
+        new SelectData() { Label = "Team", Value = "Team" },
+        new SelectData() { Label = "Low", Value = "Low" },
+        new SelectData() { Label = "Medium", Value = "Medium" },
+        new SelectData() { Label = "High", Value = "High" },
+        new SelectData() { Label = "Update", Value = "Update" }
+    };
+
+    public static Dictionary<string, string> GetTagColorMap() => new()
+    {
+        { "Team", "pry" },
+        { "Low", "sample-green" },
+        { "Medium", "remind" },
+        { "High", "error" },
+        { "Update", "info" },
+    };
+
+    public static string[] GetAvatars() => new string[]
+    {
+        "/img/avatar/1.svg",
+        "/img/avatar/8.svg",
+        "/img/avatar/12.svg",
+        "/img/avatar/10.svg",
+        "/img/avatar/11.svg",
+        "/img/avatar/9.svg"
+    };
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/User/Dto/PermissionDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/User/Dto/PermissionDto.cs
@ -0,0 +1,14 @@
+namespace Sinet.Universal.Admin.Web.Data.App.User.Dto;
+
+public class PermissionDto
+{
+    public string Module { get; set; } = default!;
+
+    public bool Read { get; set; }
+
+    public bool Write { get; set; }
+
+    public bool Create { get; set; }
+
+    public bool Delete { get; set; }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/User/Dto/UserDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/User/Dto/UserDto.cs
@ -0,0 +1,130 @@
+namespace Sinet.Universal.Admin.Web.Data.App.User.Dto;
+
+public class UserDto : IComparable
+{
+    public string Id { get; set; }
+
+    public string? HeadImg { get; set; }
+
+    [Required]
+    public string? UserName { get; set; }
+
+    [Required]
+    public string FullName { get; set; } = "";
+
+    public string? SampleName
+    {
+        get
+        {
+            return string.Join("", FullName.Split(' ').Select(n => 
+            {
+                if (n.Length > 0) return n[0].ToString().ToUpper();
+                else return "";
+            }));
+        }
+    }
+
+    public string Status { get; set; }
+
+    [Required]
+    public string Role { get; set; }
+
+    [Required]
+    public string? Plan { get; set; }
+
+    [Required]
+    public string? Country { get; set; }
+
+    [Required]
+    public string? Contact { get; set; }
+
+    [Required]
+    public string? Company { get; set; }
+
+    public string? Sales { get; set; }
+
+    public string? Profit { get; set; }
+
+    public string? Email { get; set; }
+
+    public DateOnly BirthDate { get; set; }
+
+    public string Mobile { get; set; } 
+
+    public string? Website { get; set; }
+
+    public string? Language { get; set; }
+
+    public string Gender { get; set; }
+
+    public string? ContactOptions { get; set; }
+
+    public string? Address1 { get; set; }
+
+    public string? Address2 { get; set; }
+
+    public string? Address3 { get; set; }
+
+    public string? City { get; set; }
+
+    public string? State { get; set; }
+
+    public string? Twitter { get; set; }
+
+    public string? Facebook { get; set; }
+
+    public string? Instagram { get; set; }
+
+    public string? Github { get; set; }
+
+    public string? Codepen { get; set; }
+
+    public string? Slack { get; set; }
+
+    public List<PermissionDto> Permissions { get; set; }
+
+    internal string Color { get; }
+
+    public UserDto(string status,string role,DateOnly birthDate, string mobile,string gender,List<PermissionDto> permissions)
+    {
+        Id = Guid.NewGuid().ToString();
+        Status = status;
+        Role = role;
+        BirthDate = birthDate;
+        Mobile = mobile;
+        Gender = gender;
+        Permissions=permissions;
+
+        List<string> _colors = new List<string>
+        {
+            "error", "pry", "remind", "info", "sample-green"
+        };
+        Random _ran = new Random();
+        int index = _ran.Next(0, 5);
+        Color = _colors[index];
+    }
+
+    public int CompareTo(object? other)
+    {
+        if (other is UserDto user)
+        {
+            return FullName.CompareTo(user.FullName);
+        }
+        else return 1;   
+    }
+
+    public string GetFullNameInitials()
+    {
+        var result = "";
+        foreach (var item in FullName.Split(' ', '.'))
+        {
+            result += item.Substring(0, 1);
+        }
+        return result;
+    }
+
+    public UserDto Copy()
+    {
+        return (UserDto)MemberwiseClone();
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/App/User/UserService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/App/User/UserService.cs
@ -0,0 +1,751 @@
+namespace Sinet.Universal.Admin.Web.Data.App.User;
+
+public class UserService
+{
+    static List<UserDto> _datas = new()
+    {
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "/img/avatar/4.svg",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k",
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "pdurber1c",
+            FullName = "Paulie Durber",
+            Email = "pdurber1c@gov.uk",
+            HeadImg = "",
+            Role = "Subscriber",
+            Plan = "Team",
+            Status = "Inactive",
+            Contact = "(694) 676-1275",
+            Country = "Sweden",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "owind1b",
+            FullName = "Onfre Wind",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Admin",
+            Plan = "Basic",
+            Status = "Pending",
+            Contact = "(344) 262-7270",
+            Country = "Ukraine",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "kcourtliff1a",
+            FullName = "Karena Courtliff",
+            Email = "kcourtliff1a@bbc.co.uk",
+            HeadImg = "/img/avatar/2.svg",
+            Role = "Admin",
+            Plan = "Basic",
+            Status = "Active",
+            Contact = "(478) 199-0020",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "soffner19",
+            FullName = "Saunder Offner",
+            Email = "soffner19@mac.com",
+            HeadImg = "/img/avatar/3.svg",
+            Role = "Maintainer",
+            Plan = "Basic",
+            Status = "Pending",
+            Contact = "(200) 586-2264",
+            Country = "Poland",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "cperot18",
+            FullName = "Corrie Perot",
+            Email = "cperot18@goo.ne.jp",
+            HeadImg = "",
+            Role = "Subscriber",
+            Plan = "Basic",
+            Status = "Pending",
+            Contact = "(659) 385-6808",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "vkoschek17",
+            FullName = "Vladamir Koschek",
+            Email = "vkoschek17@abc.net.au",
+            HeadImg = "",
+            Role = "Author",
+            Plan = "Basic",
+            Status = "Active",
+            Contact = "(531) 758-8335",
+            Country = "Guatemala",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "mmcnirlan16",
+            FullName = "Micaela McNirlan",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Admin",
+            Plan = "Basic",
+            Status = "Indonesia",
+            Contact = "(242) 952-0916",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "brossiter15",
+            FullName = "Benedetto Rossiter",
+            Email = "brossiter15@craigslist.org",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Basic",
+            Status = "Inactive",
+            Contact = "(323) 175-6741",
+            Country = "Indonesia",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "ebaldetti14",
+            FullName = "Edwina Baldetti",
+            Email = "ebaldetti14@theguardian.com",
+            HeadImg = "/img/avatar/7.svg",
+            Role = "Maintainer",
+            Plan = "BAsic",
+            Status = "Pending",
+            Contact = "(315) 329-3578",
+            Country = "Haiti",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "fdesporte13",
+            FullName = "Florenza Desporte",
+            Email = "fdesporte13@omniture.com",
+            HeadImg = "",
+            Role = "Author",
+            Plan = "Basic",
+            Status = "Active",
+            Contact = "(312) 104-2638",
+            Country = "Ukraine",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "twidmore12",
+            FullName = "Tyne Widmore",
+            Email = "twidmore12@bravesites.com",
+            HeadImg = "",
+            Role = "Subscriber",
+            Plan = "Basic",
+            Status = "Pending",
+            Contact = "(531) 731-0928",
+            Country = "Finland",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "mpiccard11",
+            FullName = "Moritz Piccard",
+            Email = "mpiccard11@vimeo.com",
+            HeadImg = "/img/avatar/8.svg",
+            Role = "Maintainer",
+            Plan = "Basic",
+            Status = "Inactive",
+            Contact = "(365) 277-2986",
+            Country = "Croatia",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "shebblethwaite10",
+            FullName = "Skip Hebblethwaite",
+            Email = "shebblethwaite10@arizona.edu",
+            HeadImg = "/img/avatar/9.svg",
+            Role = "Admin",
+            Plan = "Basic",
+            Status = "Inactive",
+            Contact = "(610) 343-1024",
+            Country = "Canada",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "brosebothamz",
+            FullName = "Bradan Rosebotham",
+            Email = "brosebothamz@tripadvisor.com",
+            HeadImg = "",
+            Role = "Subscriber",
+            Plan = "Basic",
+            Status = "Inactive",
+            Contact = "(882) 933-2180",
+            Country = "Belarus",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "smacgilfoyley",
+            FullName = "Stephen MacGilfoyle",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Maintainer",
+            Plan = "Basic",
+            Status = "Pending",
+            Contact = "(397) 294-5153",
+            Country = "Japan",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "ofibbensx",
+            FullName = "Ophelie Fibbens",
+            Email = "ofibbensx@booking.com",
+            HeadImg = "/img/avatar/10.svg",
+            Role = "Editor",
+            Plan = "Basic",
+            Status = "Active",
+            Contact = "(764) 885-7351",
+            Country = "Indonesia",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "/img/avatar/11.svg",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "/img/avatar/12.svg",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "/img/avatar/13.svg",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "/img/avatar/14.svg",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        },
+        new UserDto("Pending", "Subscriber", DateOnly.FromDateTime(DateTime.Now), "(895) 401-4255", "Male", GetPermissionsList())
+        {
+            UserName = "bkrabbe1d",
+            FullName = "Beverlie Krabbe",
+            Email = "bkrabbe1d@home.pl",
+            HeadImg = "",
+            Role = "Editor",
+            Plan = "Company",
+            Status = "Active",
+            Contact = "(397) 294-5153",
+            Country = "China",
+            Profit = "$99.87k",
+            Sales = "23.3k"
+        }
+    };
+
+    public static List<UserDto> GetList() => _datas;
+
+    public static List<string> GetRoleList() => new List<string>
+    {
+        "Admin", "Author", "Editor", "Maintainer", "Subscriber",
+    };
+
+    public static Dictionary<string, string> GetRoleIconMap() => new()
+    {
+        ["Editor"] = "mdi-pencil,info",
+        ["Subscriber"] = "mdi-account,pry",
+        ["Admin"] = "mdi-account-edit,error",
+        ["Maintainer"] = "mdi-database,sample-green",
+        ["Author"] = "mdi-cog,remind",
+    };
+
+    public static List<string> GetPlanList() => new List<string>
+    {
+        "Basic", "Company", "Enterprise", "Team",
+    };
+
+    public static List<string> GetStatusList() => new List<string>
+    {
+        "Pending", "Active", "Inactive",
+    };
+
+    public static List<string> GetLanguageList() => new List<string>
+    {
+        "English", "Spanish", "French", "Russian", "German", "Arabic","Sanskrit",
+    };
+
+    public static List<PermissionDto> GetPermissionsList() => new List<PermissionDto>()
+    {
+        new PermissionDto() { Module="Admin", Read = true },
+        new PermissionDto() { Module="Staff", Write = true },
+        new PermissionDto() { Module="Author", Read = true, Create = true },
+        new PermissionDto() { Module="Contributor" },
+        new PermissionDto() { Module="User", Delete = true },
+    };
+
+
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/Base/GlobalVariables.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Base/GlobalVariables.cs
@ -0,0 +1,6 @@
+namespace Sinet.Universal.Admin.Web.Data.Base;
+
+public static class GlobalVariables
+{
+    public const string DefaultRoute = "dashboard/ecommerce";    
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Base/PagingData.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Base/PagingData.cs
@ -0,0 +1,23 @@
+namespace Sinet.Universal.Admin.Web.Data.Base;
+
+public class PagingData<TEntity> where TEntity : class
+{
+    public int PageIndex { get; private set; }
+
+    public int PageSize { get; private set; }
+
+    public long Count { get; private set; }
+
+    public int PageCount => (int)Math.Ceiling(Count / (decimal)PageSize);
+
+    public IEnumerable<TEntity> Items { get; private set; }
+
+    public PagingData(int pageIndex, int pageSize, long count, IEnumerable<TEntity> items)
+    {
+        PageIndex = pageIndex;
+        PageSize = pageSize;
+        Count = count;
+        Items = items;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/Analytics/AnalyticsService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/Analytics/AnalyticsService.cs
@ -0,0 +1,13 @@
+namespace Sinet.Universal.Admin.Web.Data.Dashboard.Analytics;
+
+public static class AnalyticsService
+{
+    public static int[] GetSubscribersChartData() => new[] { 28, 40, 36, 52, 38, 60, 55 };
+
+    public static int[] GetOrdersChartData() => new[] { 10, 15, 8, 15, 7, 12, 8 };
+
+    public static int[] GetSessionsChartData() => new[] { 75, 125, 225, 175, 125, 75, 25 };
+
+    public static int[][] GetSalesChartData() => new int[][] { new[] { 70, 50, 90, 30, 70, 30 }, new[] { 50, 70, 30, 50, 50, 50 } };
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/ECommerce/Dto/CompanyDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/ECommerce/Dto/CompanyDto.cs
@ -0,0 +1,38 @@
+namespace Sinet.Universal.Admin.Web.Data.Dashboard.ECommerce.Dto;
+
+public class CompanyDto
+{
+    public string CompanyName { get; set; }
+
+    public string Category { get; set; }
+
+    public string Views { get; set; }
+
+    public string Revenue { get; set; }
+
+    public string Sales { get; set; }
+
+    public string CompanyIcon { get; set; }
+
+    public string CompanyEmail { get; set; }
+
+    public int CategoryIcon { get; set; }
+
+    public string ViewTime { get; set; }
+
+    public bool Rise { get; set; }
+
+    public CompanyDto(string companyName, string category, string views, string revenue, string sales, string companyIcon, string companyEmail, int categoryIcon, string viewTime, bool rise)
+    {
+        CompanyName = companyName;
+        Category = category;
+        Views = views;
+        Revenue = revenue;
+        Sales = sales;
+        CompanyIcon = companyIcon;
+        CompanyEmail = companyEmail;
+        CategoryIcon = categoryIcon;
+        ViewTime = viewTime;
+        Rise = rise;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/ECommerce/ECommerceService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Dashboard/ECommerce/ECommerceService.cs
@ -0,0 +1,23 @@
+namespace Sinet.Universal.Admin.Web.Data.Dashboard.ECommerce;
+
+public static class ECommerceService
+{
+    public static List<CompanyDto> GetCompanyList() => new List<CompanyDto>()
+    {
+        new("Dixons","Technology","23.4k","$891.2","68%","/img/avatar/1.svg","meguc@ruj.io",1,"in 24 hours",false),
+        new("Motels","Grocery","78k","$668.51","97%","/img/avatar/2.svg","vecav@hodzi.co.uk",2,"in 2 days",true),
+        new("Zipcar","Fashion","162","$522.29","62%","/img/avatar/3.svg","davcilse@is.gov",3,"in 5 days",true),
+        new("Owning","Technology","214","$291.01","88%","/img/avatar/4.svg","meguc@ruj.io",1,"in 24 hours",true),
+        new("Cafés","Grocery","208","$783.93","16%","/img/avatar/7.svg","meguc@ruj.io",2,"in 24 hours",false),
+    };
+
+    public static int[][] GetOrderChartData() => new int[][] { new[] { 0, 0 }, new[] { 1, 2 }, new[] { 2, 1 }, new[] { 3, 3 }, new[] { 4, 2 }, new[] { 5, 4 } };
+
+    public static int[] GetProfitChartData() => new[] { 2, 6, 4, 2, 4 };
+
+    public static int[] GetEarningsChartData() => new[] { 53, 31, 16 };
+
+    public static int[][] GetRevenueReportChartData() => new int[][] { new[] { 100, 180, 300, 250, 100, 50, 200, 140, 80 }, new[] { -180, -100, -70, -250, -130, -100, -90, -120 } };
+
+    public static int[] GetBudgetChartData() => new[] { 150, 260, 160, 200, 150, 100, 200, 140 };
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/AccountSettingService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/AccountSettingService.cs
@ -0,0 +1,18 @@
+namespace Sinet.Universal.Admin.Web.Data.Others.AccountSettings
+{
+    public static class AccountSettingService
+    {
+        public static AccountDto GetAccount() => new AccountDto("johndoe", "John Doe", "granger007@hogward.com", "Crystal Technologies");
+
+        public static List<CountryDto> GetCountryList() => new()
+        {
+            new("1", "USA"),
+            new("2", "India"),
+            new("3", "Canada"),
+        };
+
+        public static InformationDto GetInformation() => new("", DateOnly.FromDateTime(DateTime.Now), "1", "", 6562542568);
+
+        public static SocialDto GetSocial() => new("https://www.twitter.com", "", "", "https://www.linkedin.com", "", "");
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/AccountDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/AccountDto.cs
@ -0,0 +1,21 @@
+namespace Sinet.Universal.Admin.Web.Data.Others.AccountSettings.Dto
+{
+    public class AccountDto
+    {
+        public string UserName { get; set; }
+
+        public string Name { get; set; }
+
+        public string Email { get; set; }
+
+        public string Company { get; set; }
+
+        public AccountDto(string userName, string name, string email, string company)
+        {
+            UserName = userName;
+            Name = name;
+            Email = email;
+            Company = company;
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/CountryDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/CountryDto.cs
@ -0,0 +1,15 @@
+namespace Sinet.Universal.Admin.Web.Data.Others.AccountSettings.Dto
+{
+    public class CountryDto
+    {
+        public string Id { get; set; }
+
+        public string Name { get; set; }
+
+        public CountryDto(string id, string name)
+        {
+            Id = id;
+            Name = name;
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/InformationDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/InformationDto.cs
@ -0,0 +1,24 @@
+namespace Sinet.Universal.Admin.Web.Data.Others.AccountSettings.Dto
+{
+    public class InformationDto
+    {
+        public string Bio { get; set; }
+
+        public DateOnly BirthDate { get; set; }
+
+        public string Country { get; set; }
+
+        public string Website { get; set; }
+
+        public long Phone { get; set; } 
+
+        public InformationDto(string bio, DateOnly birthDate, string country, string website, long phone)
+        {
+            Bio = bio;
+            BirthDate = birthDate;
+            Country = country;
+            Website = website;
+            Phone = phone;
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/SocialDto.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Others/AccountSettings/Dto/SocialDto.cs
@ -0,0 +1,27 @@
+namespace Sinet.Universal.Admin.Web.Data.Others.AccountSettings.Dto
+{
+    public class SocialDto
+    {
+        public string Twitter { get; set; }
+
+        public string Facebook { get; set; }
+
+        public string Google { get; set; }
+
+        public string LinkedIn { get; set; }
+
+        public string Instagram { get; set; }
+
+        public string Quora { get; set; }
+
+        public SocialDto(string twitter, string facebook, string google, string linkedIn, string instagram, string quora)
+        {
+            Twitter = twitter;
+            Facebook = facebook;
+            Google = google;
+            LinkedIn = linkedIn;
+            Instagram = instagram;
+            Quora = quora;
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Data/Shared/Favorite/FavoriteService.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Data/Shared/Favorite/FavoriteService.cs
@ -0,0 +1,7 @@
+namespace Sinet.Universal.Admin.Web.Data.Shared.Favorite
+{
+    public static class FavoriteService
+    {
+        public static List<int> GetDefaultFavoriteMenuList() => new() { 5, 2, 15 };
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Global/Config/GlobalConfig.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Config/GlobalConfig.cs
@ -0,0 +1,95 @@
+namespace Sinet.Universal.Admin.Web.Global;
+
+public class GlobalConfig
+{
+    private readonly I18n _i18n;
+    private readonly CookieStorage _cookieStorage;
+
+    private string? _pageMode;
+    private bool _expandOnHover;
+    private string? _favorite;
+    private string? _navigationStyle;
+
+    public GlobalConfig(CookieStorage cookieStorage, I18n i18n)
+    {
+        _i18n = i18n;
+        _cookieStorage = cookieStorage;
+    }
+
+    public static string PageModeKey => "GlobalConfig_PageMode";
+
+    public static string NavigationStyleKey => "GlobalConfig_NavigationStyle";
+
+    public static string ExpandOnHoverCookieKey => "GlobalConfig_ExpandOnHover";
+
+    public static string FavoriteCookieKey => "GlobalConfig_Favorite";
+
+    public static string LangCookieKey => "GlobalConfig_Lang";
+
+    public EventHandler? NavigationStyleChanged { get; set; }
+
+    public string PageMode
+    {
+        get => _pageMode ?? PageModes.PageTab;
+        set
+        {
+            _pageMode = value;
+            _cookieStorage.SetAsync(PageModeKey, value);
+        }
+    }
+
+    public string NavigationStyle
+    {
+        get => _navigationStyle ?? NavigationStyles.Flat;
+        set
+        {
+            _navigationStyle = value;
+            NavigationStyleChanged?.Invoke(this, EventArgs.Empty);
+            _cookieStorage.SetAsync(NavigationStyleKey, value);
+        }
+    }
+
+    public bool ExpandOnHover
+    {
+        get => _expandOnHover;
+        set
+        {
+            _expandOnHover = value;
+            _cookieStorage.SetAsync(ExpandOnHoverCookieKey, value);
+        }
+    }
+
+    public string? Favorite
+    {
+        get => _favorite;
+        set
+        {
+            _favorite = value;
+            _cookieStorage.SetAsync(FavoriteCookieKey, value);
+        }
+    }
+
+    public CultureInfo Culture
+    {
+        get => _i18n.Culture;
+        set
+        {
+            _cookieStorage.SetAsync(LangCookieKey, value.Name);
+            _i18n.SetCulture(value);
+        }
+    }
+
+    public async Task InitFromStorage()
+    {
+        _pageMode = await _cookieStorage.GetAsync(PageModeKey);
+        _navigationStyle = await _cookieStorage.GetAsync(NavigationStyleKey);
+        _expandOnHover = Convert.ToBoolean(await _cookieStorage.GetAsync(ExpandOnHoverCookieKey));
+        _favorite = await _cookieStorage.GetAsync(FavoriteCookieKey);
+
+        var lang = await _cookieStorage.GetAsync(LangCookieKey);
+        if (!string.IsNullOrWhiteSpace(lang))
+        {
+            _i18n.SetCulture(new CultureInfo(lang));
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Global/Config/NavigationStyles.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Config/NavigationStyles.cs
@ -0,0 +1,8 @@
+namespace Sinet.Universal.Admin.Web.Global.Config
+{
+    public static class NavigationStyles
+    {
+        public const string Flat = "Flat";
+        public const string Rounded = "Rounded";
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Global/Config/PageModes.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Config/PageModes.cs
@ -0,0 +1,8 @@
+namespace Sinet.Universal.Admin.Web.Global.Config;
+
+public static class PageModes
+{
+    public const string PageTab = "PageTab";
+    public const string Breadcrumb = "Breadcrumb";
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Global/CookieStorage.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/CookieStorage.cs
@ -0,0 +1,30 @@
+using Microsoft.JSInterop;
+
+namespace Sinet.Universal.Admin.Web;
+
+public class CookieStorage
+{
+    private readonly IJSRuntime _jsRuntime;
+
+    public CookieStorage(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+
+    public async Task<string> GetAsync(string key)
+    {
+        return await _jsRuntime.InvokeAsync<string>(JsInteropConstants.GetCookie, key);
+    }
+
+    public async void SetAsync<T>(string key, T? value)
+    {
+        try
+        {
+            await _jsRuntime.InvokeVoidAsync(JsInteropConstants.SetCookie, key, value?.ToString());
+        }
+        catch
+        {
+            // ignored
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Global/Nav/Model/NavModel.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Nav/Model/NavModel.cs
@ -0,0 +1,37 @@
+namespace Sinet.Universal.Admin.Web.Global.Nav.Model;
+
+public class NavModel
+{
+    public int Id { get; set; }
+
+    public int ParentId { get; set; }
+
+    public string? Href { get; set; }
+
+    public string Icon { get; set; }
+
+    public string ParentIcon { get; set; }
+
+    public string Title { get; set; }
+
+    public string FullTitle { get; set; }
+
+    public bool Hide { get; set; }
+
+    public bool Active { get; set; }
+
+    public string? Target { get; set; }
+
+    public NavModel[]? Children { get; set; }
+
+    public NavModel(int id, string? href, string icon, string title, NavModel[]? children)
+    {
+        Id = id;
+        Href = href;
+        Icon = icon;
+        ParentIcon = icon;
+        Title = title;
+        FullTitle = title;
+        Children = children;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Global/Nav/NavHelper.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Nav/NavHelper.cs
@ -0,0 +1,71 @@
+namespace Sinet.Universal.Admin.Web.Global;
+
+public class NavHelper
+{
+    private List<NavModel> _navList;
+    private NavigationManager _navigationManager;
+
+    public List<NavModel> Navs { get; } = new();
+
+    public List<NavModel> SameLevelNavs { get; } = new();
+
+    public List<PageTabItem> PageTabItems { get; } = new();
+
+    public string CurrentUri => _navigationManager.Uri;
+
+    public NavHelper(List<NavModel> navList, NavigationManager navigationManager)
+    {
+        _navList = navList;
+        _navigationManager = navigationManager;
+        Initialization();
+    }
+
+    private void Initialization()
+    {
+        _navList.ForEach(nav =>
+        {
+            if (nav.Hide is false) Navs.Add(nav);
+
+            if (nav.Children is not null)
+            {
+                nav.Children = nav.Children.Where(c => c.Hide is false).ToArray();
+
+                nav.Children.ForEach(child =>
+                {
+                    child.ParentId = nav.Id;
+                    child.FullTitle = $"{nav.Title} {child.Title}";
+                    child.ParentIcon = nav.Icon;
+                });
+            }
+        });
+
+        Navs.ForEach(nav =>
+        {
+            SameLevelNavs.Add(nav);
+            if (nav.Children is not null) SameLevelNavs.AddRange(nav.Children);
+        });
+
+        SameLevelNavs.Where(nav => nav.Href is not null).ForEach(nav =>
+        {
+            // The following path will not open a new tab
+            if (nav.Href is "app/user/view" or "app/user/edit" or "app/ecommerce/details")
+            {
+                nav.Target = "Self";
+            }
+
+            PageTabItems.Add(new(nav.Title, nav.Href, nav.ParentIcon));
+        });
+    }
+
+    public void NavigateTo(NavModel nav)
+    {
+        _navigationManager.NavigateTo(nav.Href ?? "");
+    }
+
+    public void NavigateTo(string href)
+    {
+        _navigationManager.NavigateTo(href);
+    }
+}
+
+public record PageTabItem(string Title, string Href, string Icon);
--- a/src/client/Sinet.Universal.Admin.Web/Global/Nav/NavServiceCollectionExtensions.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Global/Nav/NavServiceCollectionExtensions.cs
@ -0,0 +1,24 @@
+namespace Microsoft.Extensions.DependencyInjection;
+
+public static class NavServiceCollectionExtensions
+{
+    public static IServiceCollection AddNav(this IServiceCollection services, List<NavModel> navList)
+    {
+        services.AddSingleton(navList);
+        services.AddScoped<NavHelper>();
+
+        return services;
+    }
+
+    public static IServiceCollection AddNav(this IServiceCollection services, string navSettingsFile)
+    {
+        var navList = JsonSerializer.Deserialize<List<NavModel>>(File.ReadAllText(navSettingsFile));
+
+        if (navList is null) throw new Exception("Please configure the navigation first!");
+
+        services.AddNav(navList);
+
+        return services;
+    }
+}
+
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Address.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Address.razor
@ -0,0 +1,111 @@
+<MRow style="height: calc(100vh - 204px);">
+    <MCol Md="8">
+        <MCard class="pa-2 fill-height d-flex flex-column justify-space-between">
+            <MCardTitle class="text-h6 neutral-lighten-1--text">
+                Add New Address
+            </MCardTitle>
+            <MCardSubtitle class="text-body neutral-lighten-2--text">
+                Be sure to check "Deliver to this address" when you have finished
+            </MCardSubtitle>
+            <MCardText class="pl-4 pr-4 mt-2">
+                <MForm Model="_address" @bind-Value="_valid" @ref="_form" EnableValidation>
+                    <MRow>
+                        <MCol Md="6" class="pb-0">
+                            <MTextField @bind-Value="_address.FullName" Label="Full Name" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6" class="pl-3">
+                            <MTextField @bind-Value="_address.MobileNumber" Label="Mobile Number" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6">
+                            <MTextField @bind-Value="_address.HouseNo" Label="Flat, House No" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6" class="pl-3">
+                            <MTextField @bind-Value="_address.Landmark" Label="Landmark" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6">
+                            <MTextField @bind-Value="_address.City" Label="Town/City" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6" class="pl-3">
+                            <MTextField @bind-Value="_address.Pincode" Label="Pincode" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6">
+                            <MTextField @bind-Value="_address.State" Label="State" Outlined></MTextField>
+                        </MCol>
+                        <MCol Md="6" class="pl-3">
+                            <MSelect @bind-Value="@_address.AddressType"
+                                     Label="Address Type"
+                                     Outlined
+                                     Items="@_addressTypes"
+                                     ItemText="u => u.Label"
+                                     ItemValue="u => u.Value">
+                            </MSelect>
+                        </MCol>
+                    </MRow>
+                </MForm>
+            </MCardText>
+            <MCardActions class="d-flex justify-center mb-10">
+                <MButton Depressed Large Width="340" class="primary text-capitalize rounded-pill" OnClick="AddressSubmit">
+                    Save and Deliver Here
+                </MButton>
+            </MCardActions>
+        </MCard>
+    </MCol>
+    <MCol Md="4">
+        <MCard class="pa-2 fill-height d-flex flex-column justify-space-between">
+            <MCardTitle class="text-h6">
+                John Doe
+            </MCardTitle>
+            <MCardText class="pl-4 pr-4 mt-2">
+                <p class="text-btn neutral-lighten-1--text mb-6">9447 Glen Eagles Drive</p>
+                <p class="text-btn neutral-lighten-1--text mb-6">Lewis Center, OH 43035</p>
+                <p class="text-btn neutral-lighten-1--text mb-6">UTC-5: Eastern Standard Time (EST)</p>
+                <p class="text-btn neutral-lighten-1--text">202-555-0140</p>
+            </MCardText>
+            <MCardActions class="d-flex justify-center mb-10">
+                <MButton Depressed Large class="primary text-capitalize rounded-pill" Width="340" OnClick="()=>{ StepChanged.InvokeAsync(2);DisabledChanged.InvokeAsync(false); }">
+                    Deliver To This Address
+                </MButton>
+            </MCardActions>
+        </MCard>
+    </MCol>
+</MRow>
+
+<MSnackbar @bind-Value="_show" Dark>
+    <ChildContent>
+        Saved successfully
+    </ChildContent>
+    <ActionContent>
+        <MButton Color="pink" Text OnClick="()=>{ _show = false; }">
+            Close
+        </MButton>
+    </ActionContent>
+</MSnackbar>
+
+@code {
+    private bool _valid = true, _show = false;
+    private MForm _form = default!;
+    private AddressDto _address = new();
+    private List<AddressTypeDto> _addressTypes = BasketService.GetAddressTypes();
+
+    [Parameter]
+    public StringNumber Step { get; set; } = default!;
+
+    [Parameter]
+    public EventCallback<StringNumber> StepChanged { get; set; }
+
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> DisabledChanged { get; set; }
+
+    private void AddressSubmit()
+    {
+        _form.Validate();
+        if (_valid)
+        {
+            _show = true;
+            _form.Reset();
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Cart.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Cart.razor
@ -0,0 +1,124 @@
+<MRow style="height: calc(100vh - 218px);" NoGutters>
+    <MCol Md="8">
+        <MVirtualScroll style="height: calc(100vh - 228px);" class="hidden-webkit-scrollbar pr-6" Items="_basketItems">
+            <ItemContent>
+                <MHover Context="hoverContext" Class="full-width mb-6">
+                    <MCard Height="270" Class="@($"{(hoverContext.Hover ? "pro-elevation" : "")}")" @attributes="hoverContext.Attrs" Elevation="@(hoverContext.Hover ? 6 : 0)">
+                        <MRow class="ma-0">
+                            <MCol Md="@("auto")" Align="AlignTypes.Center" class="d-flex flex-column align-center">
+                                <MImage src="@context.GetPictureUrl()" Width='222' Height="222" />
+                            </MCol>
+                            <MCol style="height:270px;" class="pa-6 flex-grow-1 d-flex flex-column justify-content-space-between">
+                                <div>
+                                    <div class="d-flex mb-1">
+                                        <h1 class="text-subtitle neutral-lighten-1--text">@context.Name</h1>
+                                        <span class="text-caption ml-6">InStock</span>
+                                    </div>
+                                    <p class="text-caption mb-1">By<span class="sample-green--text ml-2">@context.Company</span></p>
+                                    <MRating class="mb-1" Readonly Value="context.Score" Size=20 Color="remind" BackgroundColor="remind" Dense></MRating>
+                                    <div class="mt-3 d-flex align-center justify-start">
+                                        <span class="text-caption mr-2">Qty: </span>
+                                        <MTextField FullWidth=false Style="width:100px;max-width: 150px;" HideDetails="true" Type="number" TValue="uint" Outlined Dense @bind-Value="@context.Qty"  NumberProps="@(prop=> { prop.Min = 1; prop.Max = 99; prop.Step = 1; })"></MTextField>
+                                    </div>
+                                </div>
+                                <div class="flex-grow-1 d-flex flex-column justify-end">
+                                    @if (context.FreeShipping)
+                                    {
+                                        <div class="mb-3 d-flex justify-space-between">
+                                            <span class="text-caption neutral-lighten-4--text">Shipping</span><span class="text-caption neutral-lighten-1--text">FreeShip</span>
+                                        </div>
+                                    }
+                                    <div class="mb-3 d-flex justify-space-between">
+                                        <span class="text-caption neutral-lighten-4--text">receiving time</span><span class="text-caption neutral-lighten-1--text">@context.Delivery</span>
+                                    </div>
+                                    <div class="d-flex justify-space-between">
+                                        <span class="text-caption neutral-lighten-4--text">discounts</span><span class="text-caption neutral-lighten-1--text">@context.Offers</span>
+                                    </div>
+                                </div>
+                            </MCol>
+                            <MDivider Vertical class="mt-6 mb-6 ml-2 mr-2" />
+                            <MCol Md="@("auto")" Class="d-flex flex-column align-center justify-end align-self-end pa-6">
+                                <h5 style="height:90px;" class="d-flex align-center">@context.GetFormatPrice()</h5>
+                                <MButton Large Block Depressed Width="240" class="mt-3 text-capitalize neutral-lighten-5 neutral-lighten-2--text rounded-pill" OnClick="()=>RemoveItem(context.Id)">
+                                    Remove
+                                </MButton>
+                                <MButton Large Block Depressed class="primary mt-3 text-capitalize rounded-pill">
+                                    Wishlist
+                                </MButton>
+                            </MCol>
+                        </MRow>
+                    </MCard>
+                </MHover>
+            </ItemContent>
+        </MVirtualScroll>
+    </MCol>
+    <MCol Md="4">
+        <MCard class="pa-2 fill-height d-flex flex-column justify-space-between">
+            <MCardTitle class="text-caption">
+                OPTIONS
+            </MCardTitle>
+            <MCardText class="pl-4 pr-4">
+                <MTextField TValue="string" class="coupons mb-2 neutral-lighten-1--text" Dense Placeholder="Coupons">
+                    <AppendContent>
+                        <span class="cursor-pointer primary--text text-subtitle">Apply</span>
+                    </AppendContent>
+                </MTextField>
+                <MDivider></MDivider>
+                <div class="text-subtitle mt-6">Price Details</div>
+                <MList Dense class="pointer-events-none ml-n4 mr-n4">
+                    <MListItem>
+                        <MListItemTitle class="text-caption">TotalMRP</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn neutral-lighten-1--text"> $598 </MListItemTitle>
+                    </MListItem>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">Discount</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn neutral-lighten-1--text"> $-25 </MListItemTitle>
+                    </MListItem>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">EstimatedTax</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn neutral-lighten-1--text"> $1.3 </MListItemTitle>
+                    </MListItem>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">EMI Eligibility</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn neutral-lighten-1--text"> Details</MListItemTitle>
+                    </MListItem>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">DeliveryCharges</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn neutral-lighten-1--text"> Free </MListItemTitle>
+                    </MListItem>
+                </MList>
+                <MDivider></MDivider>
+                <MListItem class="pointer-events-none pa-0 mt-4">
+                    <MListItemTitle class="text-subtitle"> Total</MListItemTitle>
+                    <MListItemTitle class="text-right text-subtitle primary--text">$574</MListItemTitle>
+                </MListItem>
+            </MCardText>
+            <MCardActions class="d-flex justify-center mb-10">
+                <MButton Large Depressed Width="340" class="primary text-capitalize rounded-pill" OnClick="()=>{ StepChanged.InvokeAsync(1);DisabledChanged.InvokeAsync(false); }">
+                    Place Order
+                </MButton>
+            </MCardActions>
+        </MCard>
+    </MCol>
+</MRow>
+
+@code {
+    private List<BasketItemDto> _basketItems = BasketService.GetBasketItems();
+
+    [Parameter]
+    public StringNumber Step { get; set; } = default!;
+
+    [Parameter]
+    public EventCallback<StringNumber> StepChanged { get; set; }
+
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    [Parameter]
+    public EventCallback<bool> DisabledChanged { get; set; }
+
+    private void RemoveItem(int id)
+    {
+        _basketItems.Remove(_basketItems.Single(a => a.Id == id));
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Order.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Order.razor
@ -0,0 +1,44 @@
+@page "/app/ecommerce/order"
+@inherits ProComponentBase
+
+<MTabs @bind-Value="_curTab" SliderColor="transparent" class="pro-nav remover-ripple">
+    <MTab class="text-capitalize pa-0">
+        <ChildContent>
+            <span class="mtab-tab-line mtab-tab-linear-primary"></span>
+            <span class="rounded-circle mtab-tab-indicator mtab-tab-indicator-primary"></span>
+            <span class="mtab-tab-title">Card</span>
+        </ChildContent>
+    </MTab>
+    <MTab class="text-capitalize pa-0" Disabled="_addressDisabled">
+        <ChildContent>
+            <span class="mtab-tab-line @(_curTab.ToInt32()>0?"mtab-tab-linear-primary":"mtab-tab-linear-neutral")"></span>
+            <span class="rounded-circle mtab-tab-indicator @(_curTab.ToInt32()>0?"mtab-tab-indicator-primary":"mtab-tab-indicator-neutral")"></span>
+            <span class="mtab-tab-title">Address</span>
+        </ChildContent>
+    </MTab>
+    <MTab class="text-capitalize pa-0" Disabled="_paymentDisabled">
+        <ChildContent>
+            <span class="mtab-tab-line @(_curTab.ToInt32()>1?"mtab-tab-linear-primary":"mtab-tab-linear-neutral")"></span>
+            <span class="rounded-circle mtab-tab-indicator @(_curTab.ToInt32()>1?"mtab-tab-indicator-primary":"mtab-tab-indicator-neutral")"></span>
+            <span class="mtab-tab-title">Payment</span>
+        </ChildContent>
+    </MTab>
+</MTabs>
+
+<MTabsItems Value="_curTab" class="pt-6 transparent">
+    <MTabItem>
+        <Cart @bind-Step="_curTab" @bind-Disabled="_addressDisabled" />
+    </MTabItem>
+    <MTabItem>
+        <Address @bind-Step="_curTab" @bind-Disabled="_paymentDisabled" />
+    </MTabItem>
+    <MTabItem>
+        <Payment />
+    </MTabItem>
+</MTabsItems>
+
+@code {
+    private StringNumber _curTab = 0;
+    private bool _addressDisabled = true;
+    private bool _paymentDisabled = true;
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Payment.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Order/Payment.razor
@ -0,0 +1,65 @@
+<MRow style="height: calc(100vh - 204px);">
+    <MCol Md="8">
+        <MSheet Class="overflow-y-auto rounded-4 fill-height">
+            <MCard class="pa-2">
+                <MCardTitle class="text-h6 neutral-lighten-1--text">
+                    Payment Options
+                </MCardTitle>
+                <MCardSubtitle class="text-body neutral-lighten-2--text mt-n2">
+                    Be sure to click on correct payment option
+                </MCardSubtitle>
+                <MRadioGroup @bind-Value="_payOptions" class="mt-2" Dense>
+                    <MCardText>
+                        <span class="text-subtitle">John Doe</span>
+                        <MRadio class="mt-4 text-btn neutral-lighten-1--text" Label="US Unlocked Debit Card 12XX XXXX XXXX 0000" Value="1"></MRadio>
+                        <MTextField Dense Outlined TValue="string" HideDetails="true" Style="width:500px;" class="mt-6">
+                            <PrependContent>
+                                <MLabel class="auto-width mt-n2 text--body2">Enter CVV:</MLabel>
+                            </PrependContent>
+                        </MTextField>
+                        <MButton Depressed Small class="primary mt-6 text-capitalize rounded-pill">Continue</MButton>
+                        <MRadio class="mt-12 text-btn neutral-lighten-1--text" Label="Credit/Debit/ATM Card" Value="2"></MRadio>
+                        <MRadio class="mt-4 text-btn neutral-lighten-1--text" Label="Net Banking" Value="3"></MRadio>
+                        <MRadio class="mt-4 text-btn neutral-lighten-1--text" Label="EMI (Easy Installment)" Value="4"></MRadio>
+                        <MRadio class="mt-4 text-btn neutral-lighten-1--text" Label="Cash On Delivery" Value="5"></MRadio>
+                    </MCardText>
+                </MRadioGroup>
+                <MCardActions class="mt-6 pl-4">
+                    <MButton Text class="text-btn neutral-lighten-1--text">
+                        <MIcon Left style="font-size:24px;">mdi-plus-circle-outline</MIcon>
+                        Add Gift Card
+                    </MButton>
+                </MCardActions>
+            </MCard>
+        </MSheet>
+    </MCol>
+    <MCol Md="4">
+        <MCard class="pa-2 fill-height">
+            <MCardTitle class="text-h6 neutral-lighten-1--text">
+                John Doe
+            </MCardTitle>
+            <MCardText class="pa-0">
+                <MList Dense class="pointer-events-none">
+                    <MListItem>
+                        <MListItemTitle class="text-caption">Price of 3 items</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn"> $699.30 </MListItemTitle>
+                    </MListItem>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">Delivery Charges</MListItemTitle>
+                        <MListItemTitle class="text-right text-btn sample-green--text">Free</MListItemTitle>
+                    </MListItem>
+                    <MDivider Class="mx-4 mt-4 mb-4"></MDivider>
+                    <MListItem>
+                        <MListItemTitle class="text-caption">Amount Payable</MListItemTitle>
+                        <MListItemTitle class="text-right text-h5"> $699.30</MListItemTitle>
+                    </MListItem>
+                </MList>
+            </MCardText>
+        </MCard>
+    </MCol>
+</MRow>
+
+
+@code {
+    private int _payOptions = 1;
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Details.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Details.razor
@ -0,0 +1,141 @@
+@page "/app/ecommerce/details"
+@page "/app/ecommerce/details/{Id}"
+@inherits ProComponentBase
+
+<MCard>
+    <MCardText>
+        <MRow style="min-height:580px;">
+            <MCol Md="5" Align="AlignTypes.Center">
+                <MImage Contain Src="@_goods.PictureFile"></MImage>
+            </MCol>
+            <MCol Md="7" class="d-flex flex-column pa-12 pl-0">
+                <div class="mb-6">
+                    <h5 class="neutral-lighten-1--text">@_goods.Name</h5>
+                    <p class="text-body2 neutral-lighten-4--text mb-0">By<span class="text-body2 sample-green--text ml-2">@_goods.Brand</span></p>
+                </div>
+                <div class="mb-6">
+                    <p class="mb-0 text-body2"> 库存 - 现货</p>
+                    <MRating Readonly Value="_goods.Rating" Size=20 Color="remind" BackgroundColor="remind" Dense></MRating>
+                    <h6 class="neutral--text">$@_goods.Price</h6>
+                </div>
+                <p class="mb-6 text-body3 justify-text-align">
+                    @_goods.Description
+                </p>
+                <div class="mb-6 d-flex justify-space-between">
+                    <span class="text-body2">包邮</span><span class="text-body2 neutral-lighten-4--text">运费</span>
+                </div>
+                <MDivider></MDivider>
+                <div class="mb-6 mt-6 d-flex justify-space-between">
+                    <MButtonGroup Mandatory Dense Tile>
+                        <MButton Fab class="mx-2 rounded-circle ml-0 mr-0" Width="24" Height="24" MinWidth="24" Color="purple">
+                        </MButton>
+                        <MButton Fab class="mx-2 rounded-circle ml-3 mr-3" Width="24" Height="24" MinWidth="24" Color="green">
+                        </MButton>
+                        <MButton Fab class="mx-2 rounded-circle ml-0 mr-0" Width="24" Height="24" MinWidth="24" Color="orange">
+                        </MButton>
+                        <MButton Fab class="mx-2 rounded-circle ml-3 mr-3" Width="24" Height="24" MinWidth="24" Color="red">
+                        </MButton>
+                        <MButton Fab class="mx-2 rounded-circle ml-0 mr-0" Width="24" Height="24" MinWidth="24" Color="blue">
+                        </MButton>
+                    </MButtonGroup>
+                    <span class="text-body2 neutral-lighten-4--text">颜色</span>
+                </div>
+                <div class="flex-grow-1 d-flex align-end">
+                    <div class="d-flex align-center">
+                        <MButton MinWidth=100 Depressed Outlined class="primary--text rounded-pill">
+                            收藏
+                        </MButton>
+                        <MButton Depressed class="primary ml-6 mr-6 rounded-pill">
+                            加入购物车
+                        </MButton>
+                        <span class="hover-pointer" @onclick="() => { }">
+                            <MIcon Size=24 Color="neutral-lighten-3">
+                                mdi-share-variant
+                            </MIcon>
+                        </span>
+                    </div>
+
+                </div>
+            </MCol>
+        </MRow>
+    </MCardText>
+</MCard>
+
+<MRow class="mt-6">
+    <MCol Md="4" Align="AlignTypes.Center" class="pa-15 d-flex flex-column align-center">
+        <MIcon class="primary--text">mdi-crown</MIcon>
+        <h5 class="neutral-lighten-1--text mt-2 mb-2"> 五级滤芯 </h5>
+        <p class="text-center text-body neutral-lighten-3--text"> 五级过滤，层层过滤，健康饮水 </p>
+    </MCol>
+    <MCol Md="4" Align="AlignTypes.Center" class="pa-15 d-flex flex-column align-center">
+        <MIcon class="primary--text">mdi-water</MIcon>
+        <h5 class="neutral-lighten-1--text mt-2 mb-2"> 阻菌龙头 </h5>
+        <p class="text-center text-body neutral-lighten-3--text"> 阻菌龙头呵护到口，确保最后一厘米的纯净，保证你入口放心水 </p>
+    </MCol>
+    <MCol Md="4" Align="AlignTypes.Center" class="pa-15 d-flex flex-column align-center">
+        <MIcon class="primary--text">mdi-cast-connected</MIcon>
+        <h5 class="neutral-lighten-1--text mt-2 mb-2"> 智能监控 </h5>
+        <p class="text-center text-body neutral-lighten-3--text"> 直观显示滤芯寿命，触摸控制方便快捷 </p>
+    </MCol>
+</MRow>
+<MRow class="mt-6">
+    <MSheet Class="mx-auto full-width transparent">
+        <h5 class="text-center neutral-lighten-1--text">相关产品</h5>
+        <p class="text-center text-body neutral-lighten-3--text mb-0">用户还搜索了其他产品</p>
+        <MSlideGroup ShowArrows="@(true)" class="mt-6 relate-group">
+            @foreach (var item in _relatedProducts)
+            {
+                <a class="pb-3">
+                    <MSlideItem>
+                        <MHover Context="hoverContext">
+                            <MCard @attributes="hoverContext.Attrs" Elevation="@(hoverContext.Hover ? 6 : 0)" RefBack="@context.Ref" Color="@("#f8f8f8")" class="ma-3 white" Height="428" Width="333" Click="@context.Toggle">
+                                <MImage Height=333 Width=333 Src="@item.PictureFile" Class="hover-pointer"></MImage>
+                                <MDivider />
+                                <MCardText class="pa-3">
+                                    <div class="d-flex justify-space-between">
+                                        <MRating Value="@item.Rating" Size=20 Dense Readonly Length=5 Color="remind" BackgroundColor="remind"></MRating>
+                                        <h6>$@item.Price</h6>
+                                    </div>
+                                    <div class="text-subtitle text-truncate">@item.Name</div>
+                                    <div class="text-truncate text-body3 neutral-lighten-3--text">@item.Brand</div>
+                                </MCardText>
+                            </MCard>
+                        </MHover>
+                    </MSlideItem>
+                </a>
+            }
+        </MSlideGroup>
+    </MSheet>
+</MRow>
+
+@code {
+    private GoodsDto? _goods;
+    private List<GoodsDto> _relatedProducts = new();
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; } = null!;
+
+    [CascadingParameter]
+    public IPageTabsProvider? PageTabsProvider { get; set; }
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        var shopPage = new ShopPage(ShopService.GetGoodsList());
+        _goods = shopPage.GetGoods(Id);
+
+        _relatedProducts = ShopService.GetRelatedGoodsList();
+
+        UpdateTabTitle();
+    }
+
+    private void UpdateTabTitle()
+    {
+        PageTabsProvider?.UpdateTabTitle(NavigationManager.GetAbsolutePath(), () => T("Details of {0}", _goods.Name));
+    }
+
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Shop.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Shop.razor
@ -0,0 +1,121 @@
+@page "/app/ecommerce/shop"
+@inherits ProComponentBase
+
+<div class="mb-4">
+    <MCard Elevation=0 Class="rounded-4 pa-6" Style="min-width:300px;width=300px;float: left;">
+        <h6>Filters</h6>
+
+        <span class="text-btn neutral-lighten-4--text mt-1">Multi Range</span>
+        <div class="border-b-solid mt-6 mb-12 pl-2">
+            <MRadioGroup Dense @bind-Value="MultiRangeText">
+                @foreach (var multiRange in _multiRanges)
+                {
+                    <div class="block-center" style="height:40px;">
+                        <MRadio Color="primary" Value="@multiRange.Text">
+                            <LabelContent>
+                                <span class="@($"{(MultiRangeText==multiRange.Text?"text-subtitle primary--text":"text-body3")}")">@multiRange.Text</span>
+                            </LabelContent>
+                        </MRadio>
+                    </div>
+                }
+            </MRadioGroup>
+        </div>
+
+        <span class="text-btn neutral-lighten-4--text">Categories</span>
+        <div class="border-b-solid mt-6 mb-12 pl-2">
+            <MRadioGroup @bind-Value="_shopData.Category">
+                @foreach (var categorie in _categories)
+                {
+                    <div class="block-center" style="height:40px;">
+                        <MRadio Color="primary" Value="@categorie">
+                            <LabelContent>
+                                <span class="@($"{(_shopData.Category==categorie?"text-subtitle primary--text":"text-body3")}")">@categorie</span>
+                            </LabelContent>
+                        </MRadio>
+                    </div>
+                }
+            </MRadioGroup>
+        </div>
+
+        <span class="text-btn neutral-lighten-4--text">Brands</span>
+        <div class="border-b-solid mt-6 mb-12 pl-2">
+            <MRadioGroup @bind-Value="_shopData.Brand">
+                @foreach (var brand in _brands)
+                {
+                    <div class="block-center" style="height:40px;">
+                        <MRadio Color="primary" Value="@brand">
+                            <LabelContent>
+                                <span class="@($"{(_shopData.Brand==brand?"text-subtitle primary--text":"text-body3")}")">@brand</span>
+                            </LabelContent>
+                        </MRadio>
+                    </div>
+                }
+            </MRadioGroup>
+        </div>
+    </MCard>
+    <div style="float: right;width: calc(100% - 324px);">
+        <MRow>
+            <MCol Md=4 Sm=12>
+                <MCard Elevation=0 Class="line px-6 py-3 block-between">
+                    <h6>@_shopData.CurrentCount results found</h6>
+                    <MMenu OffsetY OpenOnHover>
+                        <ActivatorContent>
+                            <div @attributes="@context.Attrs">
+                                <span class="text-btn neutral-lighten-4--text">@_shopData.SortTypeLable</span>
+                                <MIcon Color="neutral-lighten-4">mdi-menu-down</MIcon>
+                            </div>
+                        </ActivatorContent>
+                        <ChildContent>
+                            <MList Class="py-0">
+                                <MListItemGroup @bind-Value="_shopData.SortTypeLable" ActiveClass="primary white--text">
+                                    <MListItem Value="@(SortType.Featured.ToString())">Featured </MListItem>
+                                    <MListItem Value="@(SortType.Lowest.ToString())"> Lowest </MListItem>
+                                    <MListItem Value="@(SortType.Highest.ToString())"> Highest </MListItem>
+                                </MListItemGroup>
+                            </MList>
+                        </ChildContent>
+                    </MMenu>
+                </MCard>
+            </MCol>
+            <MCol Md=8 Sm=12>
+                <MTextField @bind-Value="_shopData.Search" Class="rounded-2 max-height" HideDetails="@("auto")" Height=54 Flat Solo Placeholder="Search Product">
+                    <PrependInnerContent>
+                        <MIcon Size=16 Class="mr-2 neutral-lighten-1--text">mdi-magnify</MIcon>
+                    </PrependInnerContent>
+                </MTextField>
+            </MCol>
+        </MRow>
+        <MRow>
+            @foreach (var item in _shopData.GetPageDatas())
+            {
+                <MCol Md=4 Sm=12>
+                    <div class="commodity">
+                        <MCard Class="rounded-4 content">
+                            <MImage Height=260 Contain Src="@item.PictureFile" Class="hover-pointer" @onclick="()=>NavigateToDetails(item.Id)"></MImage>
+                            <MCardText Class="pa-3">
+                                <div class="block-between">
+                                    <MRating Value="item.Rating" Size=20 Dense Readonly Length=5 Color="remind" BackgroundColor="remind"></MRating>
+                                    <h6>$@item.Price</h6>
+                                </div>
+                                <div class="text-subtitle text-truncate my-1">@item.Name</div>
+                                <div class="text-truncate text-body3 neutral-lighten-3--text">@item.Description</div>
+                            </MCardText>
+                            <div class="block-between text-center">
+                                <div @onclick="()=>item.Favorite=!item.Favorite" class="rounded-bl-xl hover-pointer favorite" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-left-radius: 20px !important;">
+                                    <MIcon Size=24 Color="@(item.Favorite?"error":"neutral")">@(item.Favorite?"mdi-heart":"mdi-heart-outline")</MIcon>
+                                </div>
+                                <div @onclick="NavigateToOrder" class="hover-pointer neutral--text order" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-right-radius: 20px !important;">
+                                    <MIcon Size=24 Class="white-order">mdi-cart-outline</MIcon>
+                                </div>
+                            </div>
+                        </MCard>
+                    </div>
+                </MCol>
+            }
+        </MRow>
+        @if (_shopData.PageCount > 0)
+        {
+            <MPagination @bind-Value="_shopData.PageIndex" Color="primary" Circle Length=@_shopData.PageCount Class="mt-4 elevation-0"></MPagination>
+        }
+    </div>
+</div>
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Shop.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/Shop.razor.cs
@ -0,0 +1,39 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.ECommerce.Shop
+{
+    public partial class Shop : ProComponentBase
+    {
+        readonly List<MultiRangeDto> _multiRanges = ShopService.GetMultiRangeList();
+        readonly List<string> _categories = ShopService.GetCategortyList();
+        readonly List<string> _brands = ShopService.GetBrandList();
+        readonly ShopPage _shopData = new(ShopService.GetGoodsList());
+        string _multiRangeText = "All";
+
+        [Inject]
+        public NavigationManager Nav { get; set; } = default!;
+
+        string MultiRangeText
+        {
+            get => _multiRangeText;
+            set
+            {
+                _multiRangeText = value;
+                _shopData.MultiRange = _multiRanges.First(item => item.Text == value);
+            }
+        }
+
+        protected override void OnInitialized()
+        {
+            _shopData.MultiRange = _multiRanges[0];
+        }
+
+        private void NavigateToDetails(Guid id)
+        {
+            Nav.NavigateTo($"app/ecommerce/details/{id}");
+        }
+
+        private void NavigateToOrder()
+        {
+            Nav.NavigateTo($"app/ecommerce/order");
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/ViewModel/ShopPage.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/ECommerce/Shop/ViewModel/ShopPage.cs
@ -0,0 +1,101 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.ECommerce.Shop;
+
+public class ShopPage
+{
+    public List<GoodsDto> Datas { get; set; }
+
+    private IEnumerable<GoodsDto> GetFilterDatas()
+    {
+        IEnumerable<GoodsDto> datas = Datas;
+
+        if (MultiRange is not null)
+        {
+            datas = MultiRange.RangeType switch
+            {
+                RangeType.All => datas,
+                RangeType.Range => datas.Where(d => d.Price >= MultiRange.LeftNumber && d.Price <= MultiRange.RightNumber),
+                RangeType.Less => datas.Where(d => d.Price < MultiRange.LeftNumber),
+                RangeType.LessEqual => datas.Where(d => d.Price <= MultiRange.LeftNumber),
+                RangeType.More => datas.Where(d => d.Price > MultiRange.LeftNumber),
+                RangeType.MoreEqual => datas.Where(d => d.Price >= MultiRange.LeftNumber),
+                _ => datas
+            };
+        }
+        if (Category is not null)
+        {
+            datas = datas.Where(d => d.Category == Category);
+        }
+        if (Brand is not null)
+        {
+            datas = datas.Where(d => d.Brand == Brand);
+        }
+
+        if (SortType == SortType.Lowest)
+        {
+            datas = datas.OrderBy(d => d.Price);
+        }
+        else if (SortType == SortType.Highest)
+        {
+            datas = datas.OrderByDescending(d => d.Price);
+        }
+
+        if (Search is not null)
+        {
+            datas = datas.Where(d => d.Name.ToUpper().Contains(Search.ToUpper()));
+        }
+
+        if (datas.Count() < (PageIndex - 1) * PageSize) PageIndex = 1;
+
+        return datas;
+    }
+
+    public List<GoodsDto> GetPageDatas()
+    {
+        return GetFilterDatas().Skip((PageIndex - 1) * PageSize).Take(PageSize).ToList();
+    }
+
+    public int CurrentCount => GetFilterDatas().Count();
+
+    public int PageIndex { get; set; } = 1;
+
+    public int PageSize { get; set; } = 6;
+
+    public int PageCount => (int)Math.Ceiling(CurrentCount / (double)PageSize);
+
+    public MultiRangeDto? MultiRange { get; set; }
+
+    public string? Category { get; set; }
+
+    public string? Brand { get; set; }
+
+    SortType SortType { get; set; }
+
+    public StringNumber SortTypeLable
+    {
+        get => SortType.ToString();
+        set { SortType = (SortType)Enum.Parse(typeof(SortType), value.ToString()); }
+    }
+
+    public string? Search { get; set; }
+
+    public ShopPage(List<GoodsDto> datas)
+    {
+        Datas = datas;
+    }
+
+    public GoodsDto GetGoods(string? id)
+    {
+        return Datas.FirstOrDefault(a => a.Id.ToString() == id) ?? Datas.First();
+    }
+}
+
+public enum SortType
+{
+    Featured,
+    Lowest,
+    Highest
+}
+
+
+
+
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Add.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Add.razor
@ -0,0 +1,226 @@
+@page "/app/invoice/add"
+@inherits ProComponentBase
+
+<MRow>
+    <MCol Md=9 Sm=12>
+        <MCard>
+            <MCardText class="px-8 py-6">
+                <div class="d-flex">
+                    <div class="mr-auto">
+                        <MIcon Color=purple>fa:fas fa-seedling</MIcon>
+                        <span class="ml-4 black--text">Masa Blazor Pro</span>
+                        <h4 class="mt-6">Office 149, 450 South Brand Brooklyn</h4>
+                        <h4 class="mt-2">San Diego County, CA 91905, USA</h4>
+                        <h4 class="mt-2">+1 (123) 456 7891, +44 (876) 543 2198</h4>
+                    </div>
+                    <div>
+                        <MTextField Value="@($"#{InvoiceRecord.Id}")" Disabled Dense Label="Invoice" Placeholder="Invoice" Outlined TValue="string" />
+                        <MMenu CloseOnContentClick="true" NudgeRight="40" Transition="scale-transition" OffsetY MinWidth="@("auto")">
+                            <ActivatorContent>
+                                <MTextField Label="Date" Dense @bind-Value="InvoiceRecord.Date" Outlined Placeholder="Birth date" TValue="DateOnly" Readonly @attributes="context.Attrs"></MTextField>
+                            </ActivatorContent>
+                            <ChildContent>
+                                <MDatePicker @bind-Value="InvoiceRecord.Date" TValue="DateOnly"></MDatePicker>
+                            </ChildContent>
+                        </MMenu>
+                        <MMenu CloseOnContentClick="true" NudgeRight="40" Transition="scale-transition" OffsetY MinWidth="@("auto")">
+                            <ActivatorContent>
+                                <MTextField Label="Due Date" Dense @bind-Value="InvoiceRecord.DueDate" Outlined Placeholder="Birth date" TValue="DateOnly" Readonly @attributes="context.Attrs"></MTextField>
+                            </ActivatorContent>
+                            <ChildContent>
+                                <MDatePicker @bind-Value="InvoiceRecord.DueDate" TValue="DateOnly"></MDatePicker>
+                            </ChildContent>
+                        </MMenu>
+                    </div>
+                </div>
+            </MCardText>
+            <MDivider Class="mb-4"></MDivider>
+            <MCardText class="px-8 py-6">
+                <MRow>
+                    <MCol Md=6 Sm=12>
+                        @if (IsEdit is false)
+                        {
+                                <MSelect Items=_invoices ItemValue="u => u" Dense Label="Invoice To" ItemText="u => u" Outlined @bind-Value=_invoiceTo></MSelect>
+                        }
+                        else
+                        {
+                               <h3 class="mb-5 mt-n2 black--text">Invoice To:</h3>
+                        }
+                        @if (IsEdit || _invoiceTo != "")
+                        {
+                                <h3 class="mb-0 black--text">@(InvoiceRecord.Client?.FullName??"Lori Wells")</h3>
+                                <h3 class="mb-0 body-1">Jenkins-Rosales Inc</h3>
+                                <h3 class="mb-0 body-1">075 Smith Views, Colombia</h3>
+                                <h3 class="mb-0 body-1">@(InvoiceRecord.Client?.Mobile??"(895) 401-4255")</h3>
+                                <h3 class="mb-0 body-1">@(InvoiceRecord.Client?.Email??"calvin07@joseph-edwards.org")</h3>
+                        }
+                    </MCol>
+                    <MCol Md=6 Sm=12 Class="d-flex mt-n8">
+                        <MList Class="ml-auto" Width=280>
+                            <MListItem><h3 class="black--text">Payment Details:</h3></MListItem>
+                            <MListItem Class="mt-n2">
+                                <MListItemContent Style="max-width:110px"><h3>Total Due:</h3></MListItemContent>
+                                <MListItemAction Class="ml-0">
+                                    $12,110.55
+                                </MListItemAction>
+                            </MListItem>
+                            <MListItem Class="mt-n6">
+                                <MListItemContent Style="max-width:110px"><h3>Bank name:</h3></MListItemContent>
+                                <MListItemAction Class="ml-0">
+                                    American Bank
+                                </MListItemAction>
+                            </MListItem>
+                            <MListItem Class="mt-n6">
+                                <MListItemContent Style="max-width:110px"><h3>Country:</h3></MListItemContent>
+                                <MListItemAction Class="ml-0">
+                                    United States
+                                </MListItemAction>
+                            </MListItem>
+                            <MListItem Class="mt-n6">
+                                <MListItemContent Style="max-width:110px"><h3>IBAN:</h3></MListItemContent>
+                                <MListItemAction Class="ml-0">
+                                    ETD95476213874685
+                                </MListItemAction>
+                            </MListItem>
+                            <MListItem Class="mt-n6">
+                                <MListItemContent Style="max-width:110px"><h3>SWIFT code:</h3></MListItemContent>
+                                <MListItemAction Class="ml-0">
+                                    BR91905
+                                </MListItemAction>
+                            </MListItem>
+                        </MList>
+                    </MCol>
+                </MRow>
+
+                <div class="grey-light pa-4">
+                    @foreach (var bill in _bills)
+                    {
+                            <div class="d-flex mt-8">
+                                <div class="border-solid pa-5 max-width">
+                                    <MRow Class="max-width">
+                                        <MCol Md=5 Sm=12>
+                                            <MSelect Items=InvoiceService.GetBillList() ItemValue="u => u" ItemText="u => u.Type" TItemValue="BillDto" TItem="BillDto" TValue="BillDto" Dense Label="Item" Outlined OnChange="newValue=>OnBillChange(bill,newValue)"></MSelect>
+                                        </MCol>
+
+                                        <MCol Md=3 Sm=12>
+                                            <MTextField Label="Cost" Dense @bind-Value="bill.Cost" Outlined></MTextField>
+                                        </MCol>
+
+                                        <MCol Md=2 Sm=12>
+                                            <MTextField Label="Qty" Dense @bind-Value="bill.Qty" Outlined></MTextField>
+                                        </MCol>
+
+                                        <MCol Md=2 Sm=12>
+                                            $@bill.Price
+                                        </MCol>
+                                    </MRow>
+                                    <MRow Class="mb-n10 mt-n7 max-width">
+                                        <MCol Md=5 Sm=12>
+                                            <MTextarea Height=70 Label="Remark" Dense @bind-Value="bill.Remark" Outlined></MTextarea>
+                                        </MCol>
+                                        <MCol Md=7 Sm=12>
+                                            Discount: 0% 0% 0%
+                                        </MCol>
+                                    </MRow>
+                                </div>
+                                <div class="border-solid text-center" style="width:20px">
+                                    <MIcon Small OnClick="()=>_bills.Remove(bill)">fa:fas fa-times</MIcon>
+                                    <div style="height:75%"></div>
+                                     <MMenu NudgeRight="40" CloseOnClick="false" CloseOnContentClick="false" @bind-Value="@bill.ShowMenu" Transition="scale-transition" Left Top OffsetY MinWidth="@("auto")">
+                                        <ActivatorContent>
+                                            <MIcon @attributes="context.Attrs" Small Class="mt-auto">fa:fas fa-cog</MIcon>
+                                        </ActivatorContent>
+                                        <ChildContent>
+                                            <MCard>
+                                                <MCardText>
+                                                    <MTextField Style="width:230px" Dense Label="Discount(%)" Outlined @bind-Value="bill.Discount" />
+                                                    <div class="d-flex">
+                                                        <div style="width:100px">
+                                                            <MSelect @bind-Value="bill.Tax1" Dense Label="Tax 1" Outlined Items="_taxs" ItemText="u => ConvertText(u)" ItemValue="u=>u" />
+                                                        </div>
+                                                        <div class="ml-auto" style="width:100px">
+                                                            <MSelect @bind-Value="bill.Tax2" Dense Label="Tax 2" Outlined Items="_taxs" ItemText="u => ConvertText(u)" ItemValue="u=>u"/>
+                                                        </div>
+                                                    </div>
+                                                    <div class="d-flex">
+                                                         <MButton Class="pro-primary--text mr-auto" Outlined OnClick="()=>bill.ShowMenu=false">Apply</MButton>
+                                                         <MButton OnClick="()=>bill.ShowMenu=false" Outlined Class="blue-grey--text ml-auto">Cancel</MButton>
+                                                    </div>
+                                                </MCardText>
+                                            </MCard>
+                                        </ChildContent>
+                                    </MMenu>
+                                </div>
+                            </div>
+
+                    }
+                    <MButton Small Class="white--text mt-4" Color="#7367f0" OnClick="()=>_bills.Add(new BillDto())">Add Item</MButton>
+                </div>
+
+                <MRow Class="mt-6">
+                    <MCol Md="6" Align=AlignTypes.Center>
+                       <MTextField Label="Salesperson" TValue="string" Dense Outlined></MTextField>
+                    </MCol>
+                    <MCol Md="6" Class="d-flex justify-end">
+                        <div style="width:100%;max-width:12rem;">
+                            <div class="d-flex justify-space-between mb-2">
+                                <h3>Subtotal:</h3>
+                                <span class="font-weight-bold">$1800</span>
+                            </div>
+                            <div class="d-flex justify-space-between mb-2">
+                                <h3>Discount:</h3>
+                                <span class="font-weight-bold">$28</span>
+                            </div>
+                            <div class="d-flex justify-space-between mb-2">
+                                <h3>Tax:</h3>
+                                <span class="font-weight-bold">21%</span>
+                            </div>
+                            <MDivider Class="mt-2 mb-2" />
+                            <div class="d-flex justify-space-between">
+                                <h3>Total:</h3>
+                                <span class="font-weight-bold">$1690</span>
+                            </div>
+                        </div>
+                    </MCol>
+                </MRow>
+
+
+            </MCardText>
+            <MDivider Class="mb-4"></MDivider>
+            <MCardText class="px-8 pt-1">
+                <MTextarea Class="mb-n6" Height=70 Label="Note" @bind-Value="_note" Dense Outlined></MTextarea>
+            </MCardText>
+        </MCard>
+    </MCol>
+    <MCol Md=3 Sm=12>
+        <MCard>
+            <MCardText>
+                <div>
+                    <MButton Class="white--text max-width" Color="#7367f0">Send Invoice</MButton>
+                </div>
+                <div class="my-2">
+                    <MButton Outlined Class="pro-primary--text max-width">Preview</MButton>
+                </div>
+                <div>
+                    <MButton Outlined Class="pro-primary--text max-width">Save</MButton>
+                </div>
+                @if (IsEdit)
+                {
+                        <div class="mt-2">
+                            <MButton Block class="success" OnClick="()=>{ _showAddPayment = true; }">Add Payment</MButton>
+                        </div>
+                }
+
+            </MCardText>
+        </MCard>
+
+        <div class="mt-4">
+            <MSelect BackgroundColor="white" Items=_payments ItemValue="u => u" Dense Label="Accept Payment Via" ItemText="u => u" Outlined @bind-Value=_payment></MSelect>
+            <MSwitch Value=true Class="mt-n3" Color="#7367f0" Label="Payment Terms"></MSwitch>
+            <MSwitch Value=true Class="mt-n3" Color="#7367f0" Label="Client Notes"></MSwitch>
+            <MSwitch Class="mt-n3" Color="#7367f0" Label="Payment Stub" TValue="bool"></MSwitch>
+        </div>
+    </MCol>
+</MRow>
+
+<Sinet.Universal.Admin.Web.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Add.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Add.razor.cs
@ -0,0 +1,53 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.Invoice
+{
+    public partial class Add : ProComponentBase
+    {
+        private bool? _showAddPayment;
+        private string _invoiceTo = "";
+        private readonly List<string> _invoices = new()
+        {
+            "Hall-Robbins PLC",
+            " Mccann LLC and Sons",
+            "Leonard-Garcia and Sons",
+            "Smith, Miller and Henry LLC",
+            "Garcia-Cameron and Sons"
+        };
+        private string _payment = "";
+        private List<string> _payments = new()
+        {
+            "Bank Account",
+            "PayPal",
+            "UPI Transfer"
+        };
+        private readonly List<int> _taxs = new()
+        {
+            0,
+            1,
+            10,
+            14,
+            18
+        };
+        private List<BillDto> _bills = new()
+        {
+            new BillDto()
+        };
+        private string _note = "It was a pleasure working with you and your team. We hope you will Favorite us in mind for future freelance projects. Thank You!";
+
+        [Parameter]
+        public int? Id { get; set; }
+
+        public bool IsEdit => Id is not null;
+
+        public InvoiceRecordDto InvoiceRecord = InvoiceService.GetInvoiceRecordList().First();
+
+        public void OnBillChange(BillDto oldValue, BillDto newValue)
+        {
+            oldValue.Set(newValue);
+        }
+
+        private static string ConvertText(int value)
+        {
+            return $"{value}%";
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/AddPayment.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/AddPayment.razor
@ -0,0 +1,64 @@
+<MNavigationDrawer Absolute Temporary Right Value="Show" ValueChanged=ShowChanged Width="420" class="pa-3">
+    <MRow>
+        <MCol Md="@("auto")" Class="mr-auto">Add Payment</MCol>
+        <MCol Md="@("auto")"><MIcon OnClick="()=>{ ShowChanged.InvokeAsync(false);}">mdi-close</MIcon></MCol>
+    </MRow>
+    <MRow NoGutters class="mt-4">
+        <MCol Md="12">
+            <MTextField TValue="string" Label="Invoice Balance" Disabled Outlined Dense></MTextField>
+        </MCol>
+        <MCol Md="12">
+            <MTextField TValue="string" Label="Payment Amount" Placeholder="$10000" Outlined Dense></MTextField>
+        </MCol>
+        <MCol Md="12">
+            <MMenu @bind-Value="_dateMenu"
+                   CloseOnContentClick="false"
+                   Transition="scale-transition"
+                   OffsetY
+                   MaxWidth="290"
+                   MinWidth="@("auto")">
+                <ActivatorContent>
+                    <MTextField Value="Date"
+                                Label="Payment Date"
+                                PersistentHint
+                                Readonly Outlined Dense
+                                @attributes="context.Attrs"></MTextField>
+                </ActivatorContent>
+                <ChildContent>
+                    <MDatePicker @bind-Value="Date" OnInput="()=>_dateMenu=false" NoTitle></MDatePicker>
+                </ChildContent>
+            </MMenu>
+        </MCol>
+        <MCol Md="12">
+            <MSelect @bind-Value="@_paymentMethod"
+                     Label="Payment Method"
+                     Outlined Dense
+                     Items="@_paymentMethods"
+                     ItemText="u => u"
+                     ItemValue="u => u">
+            </MSelect>
+        </MCol>
+        <MCol Md="12">
+            <MTextarea Outlined Label="Internal Payment Note" Placeholder="Internal Payment Note">
+            </MTextarea>
+        </MCol>
+        <MCol Md="12" class="mt-3">
+            <MButton class="primary">Send</MButton>
+            <MButton Outlined>Cancel</MButton>
+        </MCol>
+    </MRow>
+</MNavigationDrawer>
+
+@code {
+    private bool _dateMenu;
+    private string _paymentMethod = "";
+    private List<string> _paymentMethods = InvoiceService.GetpaymentMethodList();
+
+    [Parameter]
+    public bool? Show { get; set; }
+
+    [Parameter]
+    public EventCallback<bool?> ShowChanged { get; set; }
+
+    private DateOnly Date { get; set; } = DateOnly.FromDateTime(DateTime.Now);
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/InvoiceList.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/InvoiceList.razor
@ -0,0 +1,204 @@
+@inject NavigationManager NavigationManager
+
+<MRow>
+    <MCol Md="12">
+        <MCard>
+            <MCardText>
+                <MDataTable Headers="_headers" Items="_invoicePage.GetPageDatas()"  ItemsPerPage="_invoicePage.PageSize"  HideDefaultFooter class="table-header-fill table-border-solid">
+                    <TopContent>
+                        <MRow class="mb-1">
+                            <MCol Md="@("auto")" class="d-flex align-center">
+                                <span class="mr-6 text-btn neutral-lighten-1--text">Entries:</span>
+                                <MSelect Items="_pageSizes"
+                                         @bind-Value="@_invoicePage.PageSize"
+                                         ItemText="u => u.ToString()"
+                                         ItemValue="u => u"
+                                         HideDetails="true"
+                                         Dense style="width:120px"
+                                         Outlined>
+                                </MSelect>
+                                <MButton Class="primary rounded-pill ml-6">Add Record</MButton> @*OnClick="NavigateToAdd"*@
+                            </MCol>
+                            <MSpacer />
+                            <MCol Md="@("auto")" class="d-flex">
+                                <MTextField @bind-Value="_invoicePage.Search" Dense class="mr-6" style="width:570px;" HideDetails="true"
+                                            Label="Search..." Outlined></MTextField>
+                                <MSelect Items="_stateItems" style="width:220px;"
+                                         @bind-Value="@_invoicePage.State" TValue="int?" TItem="InvoiceStateDto" TItemValue="int"
+                                         ItemText="u => u.Label" HideDetails="true"
+                                         ItemValue="u => u.Value"
+                                         Dense
+                                         Outlined
+                                         Clearable>
+                                </MSelect>
+                            </MCol>
+                        </MRow>
+                    </TopContent>
+                    <ItemColContent>
+                        @if (context.Header.Value == nameof(InvoiceRecordDto.State))
+                        {
+                            switch (context.Item.State)
+                            {
+                                case 1:
+                                    <span class="cyan-light cyan--text text-center vertical-center rounded-circle invoice-list-avatar">
+                                        <svg data-v-9a6e255c="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline data-v-9a6e255c="" points="8 12 12 16 16 12"></polyline><line data-v-9a6e255c="" x1="12" y1="8" x2="12" y2="16"></line></svg>
+                                    </span>
+                                    break;
+                                case 2:
+                                    <span class="pry-lighten-5 pry--text text-center vertical-center rounded-circle invoice-list-avatar">
+                                        <svg data-v-9a6e255c="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline data-v-9a6e255c="" points="17 21 17 13 7 13 7 21"></polyline><polyline data-v-9a6e255c="" points="7 3 7 8 15 8"></polyline></svg>
+                                    </span>
+                                    break;
+                                case 3:
+                                    <span class="sample-green--text lighten-green text-center vertical-center rounded-circle invoice-list-avatar">
+                                        <svg data-v-9a6e255c="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline data-v-9a6e255c="" points="22 4 12 14.01 9 11.01"></polyline></svg>
+                                    </span>
+                                    break;
+                                case 4:
+                                    <span class="remind--text remind-light text-center vertical-center rounded-circle invoice-list-avatar">
+                                        <svg data-v-9a6e255c="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path data-v-9a6e255c="" d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path data-v-9a6e255c="" d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                                    </span>
+                                    break;
+                                case 5:
+                                    <span class="error--text error-light text-center vertical-center rounded-circle invoice-list-avatar">
+                                        <svg data-v-9a6e255c="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle data-v-9a6e255c="" cx="12" cy="12" r="10"></circle><line data-v-9a6e255c="" x1="12" y1="16" x2="12" y2="12"></line><line data-v-9a6e255c="" x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                                    </span>
+                                    break;
+                            }
+                        }
+                        else if (context.Header.Value == nameof(InvoiceRecordDto.Balance))
+                        {
+                            <MChip class="text-body sample-green--text lighten-green" Light Small>
+                                Paid
+                            </MChip>
+                        }
+                        else if (context.Header.Value == nameof(InvoiceRecordDto.Client))
+                        {
+                            string color = context.Item.Client.Color;
+                            <MListItem class="grow pa-0">
+                                <MListItemAvatar Color="@($"{color}-lighten-5")">
+                                    @if (string.IsNullOrEmpty(context.Item.Client.HeadImg))
+                                    {
+                                        <span class="@($"{color}--text")">@context.Item.Client.SampleName</span>
+                                    }
+                                    else
+                                    {
+                                        <MImage Src="@context.Item.Client.HeadImg">
+                                        </MImage>
+                                    }
+                                </MListItemAvatar>
+                                <MListItemContent>
+                                    <MListItemTitle class="text-subtitle">@context.Item.Client.FullName</MListItemTitle>
+                                    <MListItemSubtitle class="text-caption">@context.Item.Client.Email</MListItemSubtitle>
+                                </MListItemContent>
+                            </MListItem>
+                        }
+                        else if (context.Header.Value == nameof(InvoiceRecordDto.Id))
+                        {
+                            <a @onclick="()=>NavigateToPreview(context.Item.Id)">#@context.Item.Id</a>
+                        }
+                        else if (context.Header.Value == nameof(InvoiceRecordDto.Date))
+                        {
+                            <span class="text-body neutral-lighten-1--text">
+                                @context.Item.Date.ToShortDateString()
+                            </span>
+                        }
+                        else if (context.Header.Value == nameof(InvoiceRecordDto.Total))
+                        {
+                            var formatTotal = $"${context.Item.Total}";
+                            <span class="text-body neutral-lighten-1--text">
+                                @formatTotal
+                            </span>
+                        }
+                        else if (context.Header.Value == "Action")
+                        {
+                            <MTooltip Top>
+                                <ActivatorContent Context="_">
+                                    <MIcon Small Class="mr-2" @attributes="@_.Attrs">mdi-send</MIcon>
+                                </ActivatorContent>
+                                <ChildContent>
+                                    <span>Send Invoice</span>
+                                </ChildContent>
+                            </MTooltip>
+                            <MTooltip Top>
+                                <ActivatorContent Context="_">
+                                    <MIcon class="mr-7 ml-7" Small @attributes="@_.Attrs">fa:far fa-eye</MIcon>
+                                    @*@onclick="()=>NavigateToPreview(context.Item.Id)"*@
+                                </ActivatorContent>
+                                <ChildContent>
+                                    <span>Preview Invoice</span>
+                                </ChildContent>
+                            </MTooltip>
+                            <MMenu OffsetY>
+                                <ActivatorContent Context="_">
+                                    <MIcon Small Class="ml-2" @attributes="@_.Attrs">mdi-dots-vertical</MIcon>
+                                </ActivatorContent>
+                                <ChildContent>
+                                    <MList Dense>
+                                        <MListItem Link>
+                                            <MListItemIcon class="mr-3">
+                                                <MIcon>mdi-arrow-down</MIcon>
+                                            </MListItemIcon>
+                                            <MListItemContent>
+                                                <MListItemTitle>
+                                                    Download
+                                                </MListItemTitle>
+                                            </MListItemContent>
+                                        </MListItem>
+                                        <MListItem Link>
+                                            @*OnClick="()=>NavigateToEdit(context.Item.Id)"*@
+                                            <MListItemIcon class="mr-3">
+                                                <MIcon>mdi-square-edit-outline</MIcon>
+                                            </MListItemIcon>
+                                            <MListItemContent>
+                                                <MListItemTitle>
+                                                    Edit
+                                                </MListItemTitle>
+                                            </MListItemContent>
+                                        </MListItem>
+                                        <MListItem Link>
+                                            <MListItemIcon class="mr-3">
+                                                <MIcon>mdi-delete-outline</MIcon>
+                                            </MListItemIcon>
+                                            <MListItemContent>
+                                                <MListItemTitle>
+                                                    Delete
+                                                </MListItemTitle>
+                                            </MListItemContent>
+                                        </MListItem>
+                                        <MListItem Link>
+                                            <MListItemIcon class="mr-3">
+                                                <MIcon>mdi-content-copy</MIcon>
+                                            </MListItemIcon>
+                                            <MListItemContent>
+                                                <MListItemTitle>
+                                                    Duplocate
+                                                </MListItemTitle>
+                                            </MListItemContent>
+                                        </MListItem>
+                                    </MList>
+                                </ChildContent>
+                            </MMenu>
+                        }
+                        else
+                        {
+                            @context.Value
+                        }
+                    </ItemColContent>
+                </MDataTable>
+                <MRow NoGutters>
+                    <MCol Md="@("auto")" Align="AlignTypes.Center">
+                        <span class="text-btn neutral-lighten-1--text"> Showing @((_invoicePage.PageIndex-1)*_invoicePage.PageSize+1) to @(_invoicePage.PageIndex*_invoicePage.PageSize) of @_invoicePage.CurrentCount entries</span>
+                    </MCol>
+                    <MSpacer />
+                    <MCol Md="@("auto")">
+                         @if(_invoicePage.PageCount>0)
+                        {
+                            <MPagination Class="ma-3" @bind-Value="_invoicePage.PageIndex" Length="_invoicePage.PageCount" Circle></MPagination>
+                        }
+                    </MCol>
+                </MRow>
+            </MCardText>
+        </MCard>
+    </MCol>
+</MRow>
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/InvoiceList.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/InvoiceList.razor.cs
@ -0,0 +1,38 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.Invoice.Components;
+
+public partial class InvoiceList
+{
+    List<int> _pageSizes = new() { 10, 25, 50, 100 };
+
+    private List<DataTableHeader<InvoiceRecordDto>> _headers = new List<DataTableHeader<InvoiceRecordDto>>
+    {
+        new (){ Text="#" , Value= nameof(InvoiceRecordDto.Id)},
+        new (){ Text="Client" , Value= nameof(InvoiceRecordDto.Client)},
+        new (){ Text="State" , Value= nameof(InvoiceRecordDto.State)},
+        new (){ Text="Total" , Value= nameof(InvoiceRecordDto.Total)},
+        new (){ Text="Issued Date" , Value= nameof(InvoiceRecordDto.Date)},
+        new (){ Text="Balance" , Value= nameof(InvoiceRecordDto.Balance)},
+        new (){ Text="Actions" , Value = "Action", Sortable = false},
+    };
+
+    private List<InvoiceStateDto> _stateItems = InvoiceService.GetStateList();
+
+    InvoicePage _invoicePage = new(InvoiceService.GetInvoiceRecordList());
+
+    private void NavigateToPreview(int id)
+    {
+        NavigationManager.NavigateTo($"apps/invoice/preview/{id}");
+    }
+
+    private void NavigateToEdit(int id)
+    {
+        NavigationManager.NavigateTo($"apps/invoice/edit/{id}");
+    }
+
+    private void NavigateToAdd()
+    {
+        NavigationManager.NavigateTo($"apps/invoice/add");
+    }
+}
+
+
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/SendInvoice.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Components/SendInvoice.razor
@ -0,0 +1,45 @@
+<MNavigationDrawer Absolute Temporary Right Value="Show" ValueChanged=ShowChanged Width="420" class="pa-3">
+    <MRow>
+        <MCol Md="@("auto")" Class="mr-auto">Send Invoice</MCol>
+        <MCol Md="@("auto")"><MIcon OnClick="()=>{ ShowChanged.InvokeAsync(false);}">mdi-close</MIcon></MCol>
+    </MRow>
+    <MRow NoGutters class="mt-4">
+        <MCol Md="12">
+            <MTextField TValue="string" Label="From"
+                        Outlined Dense></MTextField>
+        </MCol>
+        <MCol Md="12">
+            <MTextField TValue="string" Label="To"
+                        Outlined Dense></MTextField>
+        </MCol>
+        <MCol Md="12">
+            <MTextField TValue="string" Label="Subject"
+                        Outlined Dense></MTextField>
+        </MCol>
+        <MCol Md="12">
+            <MTextarea Outlined Label="Message">
+            </MTextarea>
+        </MCol>
+        <MCol Md="12">
+            <MChip Color="deep-purple accent-4" XSmall
+                   Outlined>
+                <MIcon Left Dense>
+                    mdi-link
+                </MIcon>
+                Invoice Attached
+            </MChip>
+        </MCol>
+        <MCol Md="12" class="mt-3">
+            <MButton class="primary">Send</MButton>
+            <MButton Outlined>Cancel</MButton>
+        </MCol>
+    </MRow>
+</MNavigationDrawer>
+
+@code {
+    [Parameter]
+    public bool? Show { get; set; }
+
+    [Parameter]
+    public EventCallback<bool?> ShowChanged { get; set; }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Edit.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Edit.razor
@ -0,0 +1,16 @@
+@page "/app/invoice/edit/{Id:int}"
+@page "/app/invoice/edit"
+@inherits ProComponentBase
+
+<Add Id="@Id"></Add>
+
+@code {
+    [Parameter]
+    public int? Id { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        if (Id is null) Id = 0;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/List.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/List.razor
@ -0,0 +1,3 @@
+@page "/app/invoice/list"
+
+<Sinet.Universal.Admin.Web.Pages.App.Invoice.Components.InvoiceList />
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Preview.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Preview.razor
@ -0,0 +1,167 @@
+@page "/app/invoice/preview"
+@page "/app/invoice/preview/{id:int}"
+@inherits ProComponentBase
+@inject NavigationManager NavigationManager
+
+<MRow>
+    <MCol Md="9">
+        <MCard>
+            <MCardText class="pa-0 mt-3">
+            <MRow class="pa-6">
+                <MCol Class="mr-auto" Cols="@("auto")">
+                    <div class="d-flex mb-8">
+                        <img height="48" width="48" class="hover-pointer" src="/img/mainLayout/logo.svg" />
+                        <h3 class="primary--text ml-3">Masa Blazor</h3>
+                    </div>
+                    <p class="mb-0 body-2">
+                        Office 149, 450 South Brand Brooklyn
+                    </p>
+                    <p class="mb-0 body-2">
+                        San Diego County, CA 91905, USA
+                    </p>
+                    <p class="mb-0 body-2">
+                        +1 (123) 456 7891, +44 (876) 543 2198
+                    </p>
+                </MCol>
+                <MCol Cols="@("auto")">
+                    <h4 class="text-right mb-10" style="font-size: 1.25rem;">Invoice <span>#@InvoiceRecord.Id</span></h4>
+                    <div class="d-flex justify-space-between">
+                        <p class="mb-1">Date Issued:</p>
+                        <p class="font-weight-bold mb-1">@InvoiceRecord.Date.ToString("yyyy-MM-dd")</p>
+                    </div>
+                    <div class="d-flex flex-row justify-space-between">
+                        <p>Due Date:</p>
+                        <p class="font-weight-bold">@InvoiceRecord.DueDate.ToString("yyyy-MM-dd")</p>
+                    </div>
+                </MCol>
+            </MRow>
+            <MDivider />
+            <MRow class="pa-6">
+                <MCol Md="6" Align="AlignTypes.Center">
+                    <h6 class="mb-5 subtitle-1">Invoice To:</h6>
+                    <h6 class="mb-0 subtitle-1">@InvoiceRecord.Client.FullName</h6>
+                    <p class="mb-0 body-1">Jenkins-Rosales Inc</p>
+                    <p class="mb-0 body-1">075 Smith Views, Colombia</p>
+                    <p class="mb-0 body-1">@InvoiceRecord.Client.Mobile</p>
+                    <p class="mb-0 body-1">@InvoiceRecord.Client.Email</p>
+                </MCol>
+                <MCol Md="6" Align="AlignTypes.Center" class="d-flex justify-end">
+                    <div>
+                        <h6 class="subtitle-1 mb-5">Payment Details:</h6>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="pr-1"> Total Due: </td>
+                                    <td><span class="font-weight-bold">$12,110.55</span></td>
+                                </tr>
+                                <tr>
+                                    <td class="pr-1"> Bank name: </td>
+                                    <td>American Bank</td>
+                                </tr>
+                                <tr>
+                                    <td class="pr-1"> Country: </td>
+                                    <td>@InvoiceRecord.Client.Country</td>
+                                </tr>
+                                <tr>
+                                    <td class="pr-1"> IBAN: </td>
+                                    <td>ETD95476213874685</td>
+                                </tr>
+                                <tr>
+                                    <td class="pr-1"> SWIFT code: </td>
+                                    <td>BR91905</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </MCol>
+            </MRow>
+            <MSimpleTable>
+                <thead class="blue-grey lighten-4">
+                    <tr>
+                        <th class="text-left">
+                            TASK DESCRIPTION
+                        </th>
+                        <th class="text-left">
+                            RATE
+                        </th>
+                        <th class="text-left">
+                            HOURS
+                        </th>
+                        <th class="text-left">
+                            TOTAL
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <p class="mb-1 mt-1 font-weight-bold">Native App Development</p>
+                            <p class="mb-1">Developed a full stack native app using React Native, Bootstrap & Python</p>
+                        </td>
+                        <td>$60.00</td>
+                        <td>30</td>
+                        <td>$1,800.00</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p class="mb-1 mt-1 font-weight-bold">UI Kit Design</p>
+                            <p class="mb-1">Designed a UI kit for native app using Sketch, Figma & Adobe XD</p>
+                        </td>
+                        <td>$60.00</td>
+                        <td>20</td>
+                        <td>$1200.00</td>
+                    </tr>
+                </tbody>
+            </MSimpleTable>
+            <MRow class="pa-6">
+                <MCol Md="6">
+                    <p>
+                        <span class="font-weight-bold">Salesperson:</span>
+                        <span>Alfie Solomons</span>
+                    </p>
+                </MCol>
+                <MCol Md="6" Class="d-flex justify-end">
+                    <div style="width:100%;max-width:12rem;">
+                        <div class="d-flex justify-space-between mb-2">
+                            <span>Subtotal:</span>
+                            <span class="font-weight-bold">$1800</span>
+                        </div>
+                        <div class="d-flex justify-space-between mb-2">
+                            <span>Discount:</span>
+                            <span class="font-weight-bold">$28</span>
+                        </div>
+                        <div class="d-flex justify-space-between mb-2">
+                            <span>Tax:</span>
+                            <span class="font-weight-bold">21%</span>
+                        </div>
+                        <MDivider Class="mt-2 mb-2" />
+                        <div class="d-flex justify-space-between">
+                            <span>Total:</span>
+                            <span class="font-weight-bold">$1690</span>
+                        </div>
+                    </div>
+                </MCol>
+            </MRow>
+            <MDivider />
+            <div class="pa-6">
+                <span class="font-weight-bold">Note:</span>
+                <span>It was a pleasure working with you and your team. We hope you will Favorite us in mind for future freelance projects. Thank You!</span>
+            </div>
+            </MCardText>
+        </MCard>
+    </MCol>
+    <MCol Md="3">
+        <MCard>
+            <MCardText>
+                <MButton Block class="primary" OnClick="()=>{ _showSendInvoice = true; }">Send Invoice</MButton>
+                <MButton Block Outlined class="mt-2 mb-2">Download</MButton>
+                <MButton Block Outlined>Print</MButton>
+                <MButton @onclick="NavigateToEdit" Block Outlined class="mt-2 mb-2">Edit</MButton>
+                <MButton Block class="success" OnClick="()=>{ _showAddPayment = true; }">Add Payment</MButton>
+            </MCardText>
+        </MCard>
+    </MCol>
+</MRow>
+
+<Sinet.Universal.Admin.Web.Pages.App.Invoice.Components.SendInvoice @bind-Show="_showSendInvoice" />
+<Sinet.Universal.Admin.Web.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Preview.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/Preview.razor.cs
@ -0,0 +1,19 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.Invoice
+{
+    public partial class Preview
+    {
+        private bool? _showSendInvoice;
+        private bool? _showAddPayment;
+        private InvoiceRecordDto? _invoiceRecord;
+
+        [Parameter]
+        public int? Id { get; set; }
+
+        public InvoiceRecordDto InvoiceRecord => _invoiceRecord ??= InvoiceService.GetInvoiceRecordList().FirstOrDefault(i => i.Id == Id) ?? InvoiceService.GetInvoiceRecordList().First();
+
+        private void NavigateToEdit()
+        {
+            NavigationManager.NavigateTo($"apps/invoice/edit/{Id ?? 0}");
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/ViewModel/InvoicePage.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Invoice/ViewModel/InvoicePage.cs
@ -0,0 +1,46 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.Invoice;
+
+public class InvoicePage
+{
+    public List<InvoiceRecordDto> Datas { get; set; }
+
+    private IEnumerable<InvoiceRecordDto> GetFilterDatas()
+    {
+        IEnumerable<InvoiceRecordDto> datas = Datas;
+
+        if (State is not null)
+        {
+            datas = datas.Where(d => d.State == State);
+        }
+        if (Search is not null)
+        {
+            datas = datas.Where(d => d.Client.FullName.ToUpper().Contains(Search.ToUpper()));
+        }
+
+        if (datas.Count() < (PageIndex - 1) * PageSize) PageIndex = 1;
+
+        return datas;
+    }
+
+    public List<InvoiceRecordDto> GetPageDatas()
+    {
+        return GetFilterDatas().Skip((PageIndex - 1) * PageSize).Take(PageSize).ToList();
+    }
+
+    public int CurrentCount => GetFilterDatas().Count();
+
+    public int PageIndex { get; set; } = 1;
+
+    public int PageSize { get; set; } = 10;
+
+    public int PageCount => (int)Math.Ceiling(CurrentCount / (double)PageSize);
+
+    public int? State { get; set; }
+
+    public string? Search { get; set; }
+
+    public InvoicePage(List<InvoiceRecordDto> datas)
+    {
+        Datas = datas;
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/Todo.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/Todo.razor
@ -0,0 +1,86 @@
+@page "/app/todo/{FilterText?}"
+
+<CascadingValue Value="this">
+    <div>
+        <MRow Class="no-gutters">
+            <div style="height:calc(100vh - 112px );">
+                <TodoNav />
+            </div>
+            <div class="pl-6 rounded-2" style="height:calc(100vh - 112px ); width: calc(100% - 300px); overflow: hidden; display:block;">
+                @*<TodoList FilterText=@FilterText />*@
+                <div>
+                    <MToolbar Dense Elevation="0" Class="rounded-2" Height="60">
+                        <MTextField TValue="string"
+                                    Class="task-search mx-4"
+                                    HideDetails=true
+                                    Placeholder="Search Task" @bind-Value=InputText>
+                            <PrependContent>
+                                <MIcon Small Class="mt-1">fa fa-search</MIcon>
+                            </PrependContent>
+
+                        </MTextField>
+                        <MMenu OffsetX Left OffsetY>
+                            <ActivatorContent>
+                                <MButton Class="mr-5" Icon Large @attributes="context.Attrs"><MIcon>mdi-dots-horizontal</MIcon></MButton>
+                            </ActivatorContent>
+                            <ChildContent>
+                                <MList Dense>
+                                    <MListItem Link OnClick=ResetSort>
+                                        <MListItemContent>
+                                            <MListItemTitle>
+                                                Reset Sort
+                                            </MListItemTitle>
+                                        </MListItemContent>
+                                    </MListItem>
+                                    <MListItem Link OnClick=SortbyAssignee>
+                                        <MListItemContent>
+                                            <MListItemTitle>
+                                                Sort Assignee
+                                            </MListItemTitle>
+                                        </MListItemContent>
+                                    </MListItem>
+                                    <MListItem Link OnClick=SortbyDueDate>
+                                        <MListItemContent>
+                                            <MListItemTitle>
+                                                Sort Due Date
+                                            </MListItemTitle>
+                                        </MListItemContent>
+                                    </MListItem>
+                                </MList>
+                            </ChildContent>
+                        </MMenu>
+                    </MToolbar>
+
+                    <MList Dense Class="rounded-4 mt-6" Style="height: calc(100vh - 196px ); overflow-y:auto;">
+                        @foreach (var item in _thisList)
+                        {
+                            <MListItem Style="height:58px;" Dense Link OnClick="() => ShowDetail(item)">
+                                <span @onclick:stopPropagation>
+                                    <MCheckbox Class="pa-0 ma-0" @bind-Value=@item.IsChecked Color="primary"></MCheckbox>
+                                </span>
+
+                                <MListItemContent Class="text-body neutral-lighten-2--text">
+                                    @item.Title
+                                </MListItemContent>
+
+                                <MListItemAction>
+                                    @foreach (var tag in item.Tag)
+                                    {
+                                        <MChip Class="mx-1 text-btn" Small TextColor="@_tagColorMap[tag]" Color="@(_tagColorMap[tag]+"-lighten-5")">@tag</MChip>
+                                    }
+                                    <span class="ml-4 mr-2 text-caption">@item.DueDate</span>
+                                </MListItemAction>
+
+                                <MListItemAvatar>
+                                    <img style="height:32px;width:32px" src=@_avas[item.Avatar]>
+                                </MListItemAvatar>
+                            </MListItem>
+                            <MDivider></MDivider>
+                        }
+                    </MList>
+                </div>
+            </div>
+        </MRow>
+    </div>
+    <TodoDetail Value="_visible" ValueChanged="val=>_visible = val" SelectItem=_selectItem></TodoDetail>
+</CascadingValue>
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/Todo.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/Todo.razor.cs
@ -0,0 +1,105 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.Todo
+{
+    public partial class Todo
+    {
+        private readonly Dictionary<string, string> _tagColorMap = TodoService.GetTagColorMap();
+        private readonly string[] _avas = TodoService.GetAvatars();
+
+        private TodoDto _selectItem = new();
+        private string? _filterText;
+        private bool? _visible;
+        private string? _inputText;
+        private List<TodoDto> _thisList = new();
+        private readonly List<TodoDto> _dataList = TodoService.GetList();
+
+        [Parameter]
+        public string? FilterText
+        {
+            get { return _filterText; }
+            set
+            {
+                _filterText = value;
+                _thisList = GetFilterList(_filterText);
+            }
+        }
+
+        public int GenerateId() => _dataList.Count + 1;
+
+        public List<TodoDto> GetFilterList(string? filter)
+        {
+            return filter switch
+            {
+                "important" => _dataList.Where(item => item.IsImportant && !item.IsDeleted).ToList(),
+                "completed" => _dataList.Where(item => item.IsCompleted && !item.IsDeleted).ToList(),
+                "deleted" => _dataList.Where(item => item.IsDeleted).ToList(),
+                "team" => _dataList.Where(item => item.Tag.Contains("Team")).ToList(),
+                "low" => _dataList.Where(item => item.Tag.Contains("Low")).ToList(),
+                "medium" => _dataList.Where(item => item.Tag.Contains("Medium")).ToList(),
+                "high" => _dataList.Where(item => item.Tag.Contains("High")).ToList(),
+                "update" => _dataList.Where(item => item.Tag.Contains("Update")).ToList(),
+                _ => _dataList.Where(item => !item.IsDeleted).ToList(),
+            };
+        }
+
+        private void ShowDetail(TodoDto item)
+        {
+            _visible = true;
+            _selectItem = item;
+        }
+
+        private void ResetSort()
+        {
+            _thisList = _thisList.OrderBy(d => d.Id).ToList();
+        }
+
+        private void SortbyAssignee()
+        {
+            _thisList = _thisList.OrderBy(d => d.Assignee).ToList();
+        }
+
+        private void SortbyDueDate()
+        {
+            _thisList = _thisList.OrderBy(d => d.DueDate).ToList();
+        }
+
+        private void InputTextChanged(string? text)
+        {
+            if (!string.IsNullOrWhiteSpace(text))
+                _thisList = _dataList.Where(item => item.Title.Contains(text)).ToList();
+            else
+                _thisList = _dataList;
+        }
+
+        public string? InputText
+        {
+            get { return _inputText; }
+            set
+            {
+                _inputText = value;
+                InputTextChanged(_inputText);
+            }
+        }
+
+        public void AddData(TodoDto data)
+        {
+            _dataList.Insert(0, data);
+
+            RefreshData();
+        }
+
+        public void UpdateData(TodoDto data)
+        {
+            var index = _dataList.FindIndex(d => d.Id == data.Id);
+            _dataList[index] = data;
+
+            RefreshData();
+        }
+
+        public void RefreshData()
+        {
+            FilterText = _filterText;
+
+            StateHasChanged();
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoDetail.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoDetail.razor
@ -0,0 +1,79 @@
+<MNavigationDrawer Fixed Temporary Right Value=Value ValueChanged=ValueChanged Width="465">
+    <MToolbar Style="width: 100%;" Absolute Elevation=0 Class="px-6">
+        @if (_isEdit)
+        {
+            <MButton Class="rounded-pill" OnClick="Complete" Color=@CompletedColor>
+                @CompletedText
+            </MButton>
+        }
+        else
+        {
+            <span>Add Task</span>
+        }
+        <MSpacer></MSpacer>
+        @if (_isEdit)
+        {
+            <MButton Icon OnClick="DeleteAsync">
+                <MIcon>mdi-delete-outline</MIcon>
+            </MButton>
+        }
+        <MButton Icon OnClick="() => _selectData.IsImportant = !_selectData.IsImportant">
+            @if (_selectData.IsImportant)
+            {
+                <MIcon Color="orange">mdi-star</MIcon>
+            }
+            else
+            {
+                <MIcon Color="orange">mdi-star-outline</MIcon>
+            }
+        </MButton>
+        <MButton Icon OnClick="HideNavigationDrawer">
+            <MIcon>mdi-close</MIcon>
+        </MButton>
+    </MToolbar>
+    <MForm @ref="_mForm" Model="_selectData" Class="pt-16" EnableValidation>
+        <MTextField Class="mx-6 mt-6" @bind-Value=_selectData.Title Label="Title" Outlined Clearable></MTextField>
+
+        <MSelect Class="mx-6" Outlined Label="Assignee" @bind-Value=_selectData.Assignee
+                 TItem="SelectData" TValue="string" TItemValue="string"
+                 Items=@_assigneeList ItemText="i => i.Label" ItemValue="i => i.Value">
+        </MSelect>
+
+        <div class="mx-6">
+            <MMenu CloseOnContentClick="false" @bind-Value="_dueDateMenu" NudgeRight="40" Transition="scale-transition" OffsetY MinWidth="@("auto")">
+                <ActivatorContent Context="menuContext">
+                    <MTextField Readonly @bind-Value=_selectData.DueDate Label="Due Date" Outlined Placeholder="Due Date" @attributes="menuContext.Attrs"></MTextField>
+                </ActivatorContent>
+                <ChildContent>
+                    <MDatePicker Class="task-datepicker" @bind-Value=_selectData.DueDate OnInput="()=>_dueDateMenu=false"></MDatePicker>
+                </ChildContent>
+            </MMenu>
+        </div>
+
+        <MSelect Class="mx-6" Outlined Label="Tag" Multiple @bind-Value=_selectData.Tag
+                 TItem="SelectData" TValue="List<string>" TItemValue="string"
+                 Items=@_tagList ItemText="i => i.Label" ItemValue="i => i.Value">
+            <SelectionContent Context="_context">
+                <MChip Style="height:32px;border-radius:32px;" Outlined Close CloseIcon="mdi-close" OnCloseClick="()=>HandleCloseClick(_context.Item.Label)">@_context.Item.Label</MChip>
+            </SelectionContent>
+        </MSelect>
+
+        <MTextarea Class="mx-6" Outlined Label="Description" @bind-Value=_selectData.Description></MTextarea>
+
+        <div style="position:fixed;bottom:48px;right:24px;">
+            <MButton Outlined Class="mr-6 text-capitalize neutral-lighten-2--text rounded-pill" OnClick="Reset">Reset</MButton>
+            @if (_isEdit)
+            {
+                <MButton Color="primary rounded-pill" Dark OnClick="()=>UpdateAsync(context.EditContext)">Update</MButton>
+            }
+            else
+            {
+                <MButton Color="primary rounded-pill" Dark OnClick="()=>AddAsync(context.EditContext)">Add</MButton>
+            }
+        </div>
+    </MForm>
+</MNavigationDrawer>
+
+@code {
+    bool _dueDateMenu;
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoDetail.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoDetail.razor.cs
@ -0,0 +1,140 @@
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace Sinet.Universal.Admin.Web.Pages.App.Todo;
+
+public partial class TodoDetail
+{
+    private readonly List<SelectData> _tagList = TodoService.GetTagList();
+    private readonly List<SelectData> _assigneeList = TodoService.GetAssigneeList();
+    private MForm? _mForm;
+    private bool _isEdit;
+    private TodoDto _selectData = new();
+
+    private string CompletedColor { get { return _selectData.IsCompleted ? "text-capitalize neutral-lighten-5 neutral-lighten-2--text" : "theme--dark primary"; } }
+
+    private string CompletedText { get { return _selectData.IsCompleted ? "Completed" : "Mark Complete"; } }
+
+    [CascadingParameter]
+    public Todo Todo { get; set; } = default!;
+
+    [Parameter]
+    public bool? Value { get; set; }
+
+    [Parameter]
+    public EventCallback<bool?> ValueChanged { get; set; }
+
+    [Parameter]
+    public TodoDto? SelectItem { get; set; }
+
+    [Inject]
+    public NavigationManager NavigationManager { get; set; } = default!;
+
+    private async Task HideNavigationDrawer()
+    {
+        if (ValueChanged.HasDelegate)
+        {
+            await ValueChanged.InvokeAsync(false);
+        }
+    }
+
+    private void Complete()
+    {
+        _selectData.IsCompleted = !_selectData.IsCompleted;
+        _selectData.IsChecked = _selectData.IsCompleted;
+    }
+
+    private void HandleCloseClick(string lable)
+    {
+        _selectData.Tag.Remove(lable);
+    }
+
+    protected override void OnParametersSet()
+    {
+        if (SelectItem == null)
+        {
+            SelectItem = new TodoDto();
+            _isEdit = false;
+        }
+        else
+        {
+            _isEdit = true;
+        }
+
+        _selectData = new TodoDto
+        {
+            Id = SelectItem.Id,
+            IsChecked = SelectItem.IsChecked,
+            Assignee = SelectItem.Assignee,
+            Avatar = SelectItem.Avatar,
+            Description = SelectItem.Description,
+            IsCompleted = SelectItem.IsCompleted,
+            IsDeleted = SelectItem.IsDeleted,
+            IsImportant = SelectItem.IsImportant,
+            DueDate = SelectItem.DueDate,
+            Title = SelectItem.Title
+        };
+        _selectData.Tag.AddRange(SelectItem.Tag);
+
+        if (ValueChanged.HasDelegate && !(Value is true) && _mForm != null)
+        {
+            _mForm.ResetValidation();
+        }
+    }
+
+    private async Task AddAsync(EditContext context)
+    {
+        var success = context.Validate();
+        if (success)
+        {
+            _selectData.Id = Todo.GenerateId();
+            Todo.AddData(_selectData);
+            await HideNavigationDrawer();
+
+            NavigationManager.NavigateTo("app/todo");
+        }
+    }
+
+    private async Task UpdateAsync(EditContext context)
+    {
+        var success = context.Validate();
+        if (success)
+        {
+            var data = (TodoDto)context.Model;
+            Todo.UpdateData(data);
+            await HideNavigationDrawer();
+        }
+    }
+
+    private void Reset()
+    {
+        if (_mForm != null)
+        {
+            _mForm.ResetValidation();
+        }
+
+        if (SelectItem != null)
+        {
+            _selectData = new TodoDto
+            {
+                Id = SelectItem.Id,
+                IsChecked = SelectItem.IsChecked,
+                Assignee = SelectItem.Assignee,
+                Avatar = SelectItem.Avatar,
+                Description = SelectItem.Description,
+                IsCompleted = SelectItem.IsCompleted,
+                IsDeleted = SelectItem.IsDeleted,
+                IsImportant = SelectItem.IsImportant,
+                DueDate = SelectItem.DueDate,
+                Tag = SelectItem.Tag,
+                Title = SelectItem.Title
+            };
+        }
+    }
+
+    private async Task DeleteAsync()
+    {
+        _selectData.IsDeleted = true;
+        Todo.UpdateData(_selectData);
+        await HideNavigationDrawer();
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoNav.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoNav.razor
@ -0,0 +1,26 @@
+<MNavigationDrawer Permanent Class="rounded-4" Width="300" Style="overflow: visible;">
+    <MButton Class="ma-6 rounded-pill" Style="width:-webkit-fill-available;" Dark Color="primary" OnClick="() => visible = true">Add Task</MButton>
+    <MList Routable Dense Class="remover-ripple">
+        <TodoNavItem Href="/app/todo" Icon="mdi-email-outline" Title="My Task"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/important" Icon="mdi-star-outline" Title="Important"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/completed" Icon="mdi-check" Title="Completed"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/deleted" Icon="mdi-delete-outline" Title="Deleted"></TodoNavItem>
+
+        <MRow NoGutters Justify="JustifyTypes.SpaceBetween">
+            <MSubheader Class="px-6 my-6 text-subtitle neutral-lighten-4--text">Tags</MSubheader>
+            <MIcon Class="px-6 my-6" Small Color="#A3AED0">fa:fas fa-plus</MIcon>
+        </MRow>
+
+        <TodoNavItem Href="/app/todo/team" Icon="fa:fas fa-circle" IconColor="purple" Title="Team"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/low" Icon="fa:fas fa-circle" IconColor="#05CD99" Title="Low"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/medium" Icon="fa:fas fa-circle" IconColor="#FFB547" Title="Medium"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/high" Icon="fa:fas fa-circle" IconColor="#FF5252" Title="High"></TodoNavItem>
+        <TodoNavItem Href="/app/todo/update" Icon="fa:fas fa-circle" IconColor="#4318FF" Title="Update"></TodoNavItem>
+    </MList>
+</MNavigationDrawer>
+
+<TodoDetail @bind-Value="visible" SelectItem=null></TodoDetail>
+
+@code {
+    bool? visible;
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoNavItem.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/Todo/TodoNavItem.razor
@ -0,0 +1,29 @@
+<MListItem Exact Style="height:38px;" Class="px-6" Link Href="@Href">
+    <ItemContent>
+        <MListItemIcon Class="mr-2">
+            <MIcon Color="@ListItemIconColor(context.Active)" Size=18>@Icon</MIcon>
+        </MListItemIcon>
+        <MListItemContent>
+            <MListItemTitle Class="@ListItemTitleClass(context.Active)">@Title</MListItemTitle>
+        </MListItemContent>
+    </ItemContent>
+</MListItem>
+
+
+@code {
+    string ListItemIconColor(bool active) => IconColor ?? (active ? "primary" : "neutral-lighten-4");
+    static string ListItemTitleClass(bool active) => active ? "text-subtitle primary--text" : "text-body neutral-lighten-4--text";
+
+    [Parameter]
+    public string Href { get; set; }
+
+    [Parameter]
+    public string Icon { get; set; }
+
+    [Parameter]
+    public string? IconColor { get; set; }
+
+    [Parameter]
+    public string Title { get; set; }
+
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/User/Add.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/User/Add.razor
@ -0,0 +1,65 @@
+<MNavigationDrawer Temporary Fixed Right Value=Visible ValueChanged=VisibleChanged Width="465" Class="pa-6">
+    <div class="block-between mb-12">
+        <span class="text-h6">Add New User</span>
+        <MIcon Color="neutral-lighten-3" Size=24 OnClick="()=>Visible=false">mdi-close</MIcon>
+    </div>
+    <MForm Model=_userData EnableValidation>
+        <MTextField @bind-Value="_userData.FullName" Class="mb-6" Label="FullName" HideDetails="@("auto")" Outlined />
+        <MTextField @bind-Value="_userData.UserName" Class="mb-6" Label="UserName" HideDetails="@("auto")" Outlined />
+        <MTextField @bind-Value="_userData.Email" Class="mb-6" Label="Email" HideDetails="@("auto")" Outlined />
+        <MTextField @bind-Value="_userData.Contact" Class="mb-6" Label="Contact" HideDetails="@("auto")" Outlined />
+        <MTextField @bind-Value="_userData.Company" Class="mb-6" Label="Company" HideDetails="@("auto")" Outlined />
+        <MTextField @bind-Value="_userData.Country" Class="mb-6" Label="Country" HideDetails="@("auto")" Outlined />
+        <MSelect HideDetails="@("auto")" Class="mb-6" Outlined Label="Assignee" @bind-Value=_userData.Role
+                 Items=@UserService.GetRoleList() ItemText="r => r" ItemValue="r => r">
+        </MSelect>
+        <MSelect HideDetails="@("auto")" Class="mb-6" Outlined Label="Assignee" @bind-Value=_userData.Plan
+                 Items=@UserService.GetPlanList() ItemText="p => p" ItemValue="p => p">
+        </MSelect>
+
+        <div style="bottom:48px;right:24px;position:absolute">
+            <MButton MinWidth=80 Height=40 Outlined Class="text-btn rounded-pill" OnClick="async() => await UpdateVisible(false)"> Cancel </MButton>
+            <MButton MinWidth=80 Height=40 Color="primary" Class="ml-6 rounded-pill" OnClick="async ()=> await AddData(context.EditContext)"> Add </MButton>
+        </div>
+    </MForm>
+</MNavigationDrawer>
+
+@code {
+    private UserDto _userData = new UserDto("","",DateOnly.FromDateTime(DateTime.Now),"","",UserService.GetPermissionsList());
+
+    [Parameter]
+    public bool? Visible { get; set; }
+
+    [Parameter]
+    public EventCallback<bool?> VisibleChanged { get; set; }
+
+    [Parameter]
+    public EventCallback<UserDto> Submit { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        _userData = new UserDto("","",DateOnly.FromDateTime(DateTime.Now),"","",UserService.GetPermissionsList());
+    }
+
+    private async Task UpdateVisible(bool visible)
+    {
+        if (VisibleChanged.HasDelegate)
+        {
+            await VisibleChanged.InvokeAsync(visible);
+        }
+        else
+        {
+            Visible = visible;
+        }
+    }
+
+    private async Task AddData(EditContext context)
+    {
+        if (context.Validate())
+        {
+            if (Submit.HasDelegate) await Submit.InvokeAsync(_userData);
+
+            await UpdateVisible(false);
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/User/Edit.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/User/Edit.razor
@ -0,0 +1,278 @@
+@page "/app/user/edit"
+@page "/app/user/edit/{Id}"
+@inherits ProComponentBase
+
+<MCard>
+<MCardText Class="px-6 pb-6">
+<MTabs @bind-Value="tab" HideSlider Height=10 Color="sample-green">
+    <MTab Value="@("Account")">
+        <MIcon Size=16 Color="@(tab == "Account" ? "sample-green" : "fill")">mdi-circle</MIcon>
+        <span class="ml-2 text-btn @(tab == "Account" ? "neutral--text" : "")">Account</span>
+    </MTab>
+    <MTab Class="ml-2" Value="@("Information")">
+        <MIcon Size=16 Color="@(tab == "Information" ? "sample-green" : "fill")">mdi-circle</MIcon>
+        <span class="ml-2 text-btn @(tab == "Information" ? "neutral--text" : "")">Information</span>
+    </MTab>
+    <MTab Class="ml-2" Value="@("Social")">
+        <MIcon Size=16 Color="@(tab == "Social" ? "sample-green" : "fill")">mdi-circle</MIcon>
+        <span class="ml-2 text-btn @(tab == "Social" ? "neutral--text" : "")">Social</span>
+    </MTab>
+</MTabs>
+<MTabsItems @bind-Value="tab" Class="mt-4">
+<MTabItem Value="@("Account")">
+    <div class="d-flex block-center mt-3">
+        @if (string.IsNullOrEmpty(UserData.HeadImg))
+        {
+            string color = UserData.Color;
+            <MAvatar Size="120" Color="@($"{color}-lighten-5")">
+                <span class="@($"{color}--text text-h3")">@UserData.SampleName</span>
+            </MAvatar>
+        }
+        else
+        {
+            <MAvatar Size="120">
+                @*<MImage Contain Src="@UserData.HeadImg" />*@
+                <img src="@UserData.HeadImg" />
+            </MAvatar>
+        }
+        <div Class="ml-6">
+            <h5 class="mb-6">@UserData.FullName</h5>
+            <MButton Color="primary" MinWidth=80 Height=32 Class="rounded-pill"> Update </MButton>
+            <MButton Outlined MinWidth=80 Height=32 Class="ml-6 text-btn rounded-pill"> Remove </MButton>
+        </div>
+    </div>
+    <MRow Class="my-3">
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.UserName" Color="primary" Label="UserName" HideDetails="@("auto")" Outlined />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.FullName" Color="primary" Label="FullName" HideDetails="@("auto")" Outlined />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Email" Color="primary" Label="Email" HideDetails="@("auto")" Outlined />
+        </MCol>
+    </MRow>
+    <MRow>
+        <MCol Md=4 Sm=12>
+            <MSelect @bind-Value="UserData.Status"
+                     Color="primary"
+                     HideDetails="@("auto")"
+                     Outlined
+                     Items="@UserService.GetStatusList()"
+                     ItemText="u => u"
+                     ItemValue="u => u"
+                     Label="Status">
+            </MSelect>
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MSelect @bind-Value="UserData.Role"
+                     Color="primary"
+                     HideDetails="@("auto")"
+                     Outlined
+                     Items="@UserService.GetRoleList()"
+                     ItemText="u => u"
+                     ItemValue="u => u"
+                     Label="Role">
+            </MSelect>
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Company" Color="primary" Label="Company" HideDetails="@("auto")" Outlined />
+        </MCol>
+    </MRow>
+
+    <div class="mt-12 mb-3">
+        <MIcon Size=20 Color="sample-green" Class="mt-n1">mdi-lock-open-outline</MIcon>
+        <span class="ml-1 text-h6">Permission</span>
+    </div>
+    <MDataTable HideDefaultFooter Headers="_headers" TItem="PermissionDto" Items="UserData.Permissions" ItemKey="r => r.Module" Class="table-header-fill table-border-solid">
+        <HeaderColContent Context="header">
+            <span class="text-body neutral-lighten-1--text">@header.Text</span>
+        </HeaderColContent>
+
+        <ItemColContent>
+            @switch (context.Header.Value)
+            {
+                case nameof(PermissionDto.Module):
+                    <span class="text-body neutral-lighten-2--text">@context.Value</span>
+                    break;
+                case nameof(PermissionDto.Read):
+                    <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Read"></MCheckbox>
+                    break;
+                case nameof(PermissionDto.Write):
+                    <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Write"></MCheckbox>
+                    break;
+                case nameof(PermissionDto.Create):
+                    <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Create"></MCheckbox>
+                    break;
+                case nameof(PermissionDto.Delete):
+                    <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Delete"></MCheckbox>
+                    break;
+                default:
+                    @context.Value
+                    break;
+            }
+        </ItemColContent>
+    </MDataTable>
+</MTabItem>
+
+<MTabItem Value="@("Information")">
+    <div class="mt-3">
+        <MIcon Size=20 Color="sample-green" Class="mt-n1">fa:far fa-user</MIcon>
+        <span class="ml-1 text-h6">Personal Information</span>
+    </div>
+
+    <MRow Class="mt-3">
+        <MCol Md=4 Sm=12>
+            <MMenu CloseOnContentClick="false" NudgeRight="40" Transition="scale-transition" OffsetY MinWidth="@("auto")" @bind-Value="_birthDateMenu">
+                <ActivatorContent Context="menuContext">
+                    <MTextField @bind-Value=UserData.BirthDate Label="BirthDate" Color="primary" Readonly HideDetails="@("auto")" Outlined @attributes="menuContext.Attrs"></MTextField>
+                </ActivatorContent>
+                <ChildContent>
+                    <MDatePicker Class="task-datepicker" @bind-Value=UserData.BirthDate OnInput="() => _birthDateMenu = false"></MDatePicker>
+                </ChildContent>
+            </MMenu>
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Mobile" Label="Mobile" Color="primary" HideDetails="@("auto")" Outlined />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Website" Label="Website" Color="primary" HideDetails="@("auto")" Outlined />
+        </MCol>
+    </MRow>
+
+    <MRow Class="mt-3">
+        <MCol Md=4 Sm=12>
+            <MSelect @bind-Value="UserData.Language"
+                     Color="primary"
+                     Outlined
+                     HideDetails="@("auto")"
+                     Items="@UserService.GetLanguageList()"
+                     ItemText="u => u"
+                     ItemValue="u => u"
+                     Label="Language">
+            </MSelect>
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <span class="text-btn">Gender</span>
+            <MRadioGroup @bind-Value="UserData.Gender" HideDetails="@("auto")" Color="primary" Row Class="mt-1">
+                <MRadio Color="primary" Label="Male" Value="@("Male")"></MRadio>
+                <MRadio Color="primary" Label="Female" Value="@("Female")"></MRadio>
+            </MRadioGroup>
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <span class="text-btn">Contact Options</span>
+            <div class="d-flex mt-n2">
+                <MCheckbox Label="Email" HideDetails="@("auto")" Color="primary" TValue="bool"></MCheckbox>
+                <MCheckbox Label="Message" HideDetails="@("auto")" Color="primary" TValue="bool" Class="ml-2"></MCheckbox>
+                <MCheckbox Label="Phone" HideDetails="@("auto")" Color="primary" TValue="bool" Class="ml-2"></MCheckbox>
+            </div>
+
+        </MCol>
+    </MRow>
+
+    <div class="mt-12">
+        <MIcon Size=20 Color="sample-green" Class="mt-n1">mdi-map-marker-outline</MIcon>
+        <span class="text-h6">Address</span>
+        <MRow Class="mt-3">
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.Address1" Label="Address Line 1" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.Address2" Label="Address Line 2" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.Address3" Label="Address Line 3" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+        </MRow>
+        <MRow Class="mt-3">
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.City" Label="City" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.State" Label="State" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+            <MCol Md=4 Sm=12>
+                <MTextField @bind-Value="UserData.Country" Label="Country" Color="primary" HideDetails="@("auto")" Outlined />
+            </MCol>
+        </MRow>
+    </div>
+</MTabItem>
+
+<MTabItem Value="@("Social")">
+    <MRow class="mt-1">
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Twitter" Label="Twitter" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="fa:fab fa-twitter" />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Facebook" Label="Facebook" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="mdi-facebook" />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Instagram" Label="Instagram" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="fa:fab fa-instagram" />
+        </MCol>
+    </MRow>
+    <MRow Class="mt-3">
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Github" Label="Github" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="fa:fab fa-github" />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Codepen" Label="Codepen" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="fa:fab fa-codepen" />
+        </MCol>
+        <MCol Md=4 Sm=12>
+            <MTextField @bind-Value="UserData.Slack" Label="Slack" Color="primary" HideDetails="@("auto")" Outlined PrependInnerIcon="fa:fab fa-slack" />
+        </MCol>
+    </MRow>
+</MTabItem>
+</MTabsItems>
+
+<div class="mt-10 d-flex">
+    <MSpacer></MSpacer>
+    <MButton MinWidth=80 Height=40 Outlined Class="text-btn rounded-pill"> Reset </MButton>
+    <MButton MinWidth=80 Height=40 Color="primary" Class="ml-6 rounded-pill"> Save Changes </MButton>
+</div>
+</MCardText>
+</MCard>
+
+@code {
+    private UserDto? _userData;
+    private StringNumber? tab;
+    private bool _birthDateMenu;
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; } = null!;
+
+    [CascadingParameter]
+    private IPageTabsProvider? PageTabsProvider { get; set; }
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    public UserDto UserData
+    {
+        get { return _userData ?? (_userData = UserService.GetList().First().Copy()); }
+        set { _userData = value; }
+    }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _userData = UserService.GetList().FirstOrDefault(u => u.Id == Id)?.Copy();
+
+        UpdateTabTitle();
+    }
+
+    private void UpdateTabTitle()
+    {
+        PageTabsProvider?.UpdateTabTitle(NavigationManager.GetAbsolutePath(), () => T("Edit of {0}", UserData.FullName));
+    }
+
+    private List<DataTableHeader<PermissionDto>> _headers = new List<DataTableHeader<PermissionDto>>
+    {
+        new() { Text = "MODULE", Sortable = false, Value = nameof(PermissionDto.Module) },
+        new() { Text = "READ", Sortable = false, Value = nameof(PermissionDto.Read), Align = DataTableHeaderAlign.Center },
+        new() { Text = "WRITE", Sortable = false, Value = nameof(PermissionDto.Write), Align = DataTableHeaderAlign.Center },
+        new() { Text = "CREATE", Sortable = false, Value = nameof(PermissionDto.Create), Align = DataTableHeaderAlign.Center },
+        new() { Text = "DELETE", Sortable = false, Value = nameof(PermissionDto.Delete), Align = DataTableHeaderAlign.Center }
+    };
+
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/User/List.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/User/List.razor
@ -0,0 +1,169 @@
+@page "/app/user/list"
+@inherits ProComponentBase
+@inject NavigationManager Nav
+
+<MCard>
+    <MCardText Class="pa-6">
+        <h6>Filters</h6>
+        <MRow Class="mt-3">
+            <MCol Sm=12 Md=4>
+                <MSelect @bind-Value="_userPage.Role"
+                         Color="primary"
+                         HideDetails="@("auto")"
+                         Clearable
+                         Outlined
+                         Items="@UserService.GetRoleList()"
+                         ItemText="u => u"
+                         ItemValue="u => u"
+                         Label="Role">
+                </MSelect>
+            </MCol>
+            <MCol Sm=12 Md=4>
+                <MSelect @bind-Value="_userPage.Plan"
+                         Color="primary"
+                         HideDetails="@("auto")"
+                         Clearable
+                         Outlined
+                         Items="@UserService.GetPlanList()"
+                         ItemText="u => u"
+                         ItemValue="u => u"
+                         Label="Plan">
+                </MSelect>
+            </MCol>
+            <MCol Sm=12 Md=4>
+                <MSelect @bind-Value="_userPage.Status"
+                         Color="primary"
+                         HideDetails="@("auto")"
+                         Clearable
+                         Outlined
+                         Items="@UserService.GetStatusList()"
+                         ItemText="u => u"
+                         ItemValue="u => u"
+                         Label="Status">
+                </MSelect>
+            </MCol>
+        </MRow>
+    </MCardText>
+</MCard>
+
+<MCard Class="mt-6">
+    <MCardText Class="pa-6">
+        <MRow>
+            <MCol Md=6 Sm=12 Class="d-flex block-center">
+                <span class="text-btn neutral-lighten-1--text">Show:</span>
+                <MSelect @bind-Value="_userPage.PageSize"
+                         Color="primary"
+                         Style="max-width:120px;"
+                         Dense
+                         Class="mx-6"
+                         HideDetails="@("auto")"
+                         Outlined
+                         Items="@_pageSizes"
+                         ItemText="u => u.ToString()"
+                         ItemValue="u => u">
+                </MSelect>
+                <span class="text-btn">entries</span>
+            </MCol>
+            <MCol Md=6 Sm=12 Class="d-flex block-center">
+                <MTextField @bind-Value="_userPage.Search" Color="primary" Class="rounded-2" HideDetails="@("auto")" Flat Dense Solo BackgroundColor="fill-lighten-1" Placeholder="Search">
+                    <PrependInnerContent>
+                        <MIcon Size=16 Class="mr-2 neutral-lighten-1--text">mdi-magnify</MIcon>
+                    </PrependInnerContent>
+                </MTextField>
+                <MButton Color="primary" MinWidth=80 Height=32 Class="ml-6 rounded-pill" OnClick="()=>_visible=true">
+                    Add User
+                </MButton>
+            </MCol>
+        </MRow>
+    </MCardText>
+
+    <MDataTable Headers="_headers" Items="_userPage.GetPageDatas()" TItem="UserDto" ItemsPerPage="_userPage.PageSize" HideDefaultFooter Class="user ml-2 table-border-none">
+        <HeaderColContent Context="header">
+            <span class="text-subtitle">@header.Text</span>
+        </HeaderColContent>
+        <ItemColContent>
+            @switch (context.Header.Value)
+            {
+                case nameof(UserDto.UserName):
+                    <div class="hover-pointer d-flex my-2" @onclick="()=>NavigateToDetails(context.Item.Id)">
+                        @if (string.IsNullOrEmpty(context.Item.HeadImg))
+                        {
+                            string color = context.Item.Color;
+
+                            <MAvatar Size=48 Color="@($"{color}-lighten-5")" Class="mt-1">
+                                <span class="@($"{color}--text")">@context.Item.SampleName</span>
+                            </MAvatar>
+                        }
+                        else
+                        {
+                            <MAvatar Size=48 Class="mt-1">
+                                <MImage Contain Src="@context.Item.HeadImg"></MImage>
+                            </MAvatar>
+                        }
+                        <div class="ml-4">
+                            <div class="text-subtitle">@context.Item.FullName</div>
+                            <div class="text-caption mt-1">@@@context.Item.UserName</div>
+                        </div>
+                    </div>
+                    break;
+                case (nameof(UserDto.Email)):
+                    <span>@context.Item.Email</span>
+                    break;
+                case nameof(UserDto.Role):
+                    var arr = _roleIconMap[context.Item.Role!].Split(",");
+                    <MIcon Left Small Class="@($"{arr[1]}--text")">@arr[0]</MIcon>
+                    @context.Item.Role
+                    break;
+                case (nameof(UserDto.Plan)):
+                    @context.Item.Plan
+                    break;
+                case nameof(UserDto.Status):
+                    string statusColor = context.Item.Color;
+                    <MChip Color="@($"{statusColor}-lighten-5")" TextColor="@(statusColor)" Ripple="false">
+                        <span>@context.Item.Status</span>
+                    </MChip>
+                    break;
+                case "Action":
+                    <MMenu Right Bottom>
+                        <ActivatorContent Context="activatorContext">
+                            <MButton Icon @attributes="@activatorContext.Attrs">
+                                <MIcon XSmall>fa:fas fa-ellipsis-v</MIcon>
+                            </MButton>
+                        </ActivatorContent>
+                        <ChildContent>
+                            <MList>
+                                <MListItem OnClick="()=>NavigateToDetails(context.Item.Id)">
+                                    <MIcon Small>fa:fas fa-user-tie</MIcon>
+                                    <MListItemTitle Class="ml-2"> Details </MListItemTitle>
+                                </MListItem>
+                                <MListItem OnClick="()=>NavigateToEdit(context.Item.Id)">
+                                    <MIcon Small>fa:far fa-edit</MIcon>
+                                    <MListItemTitle Class="ml-2"> Edit </MListItemTitle>
+                                </MListItem>
+                                <MListItem OnClick="()=>_userPage.UserDatas.RemoveAt(_userPage.UserDatas.FindIndex(u=>u.Id==context.Item.Id))">
+                                    <MIcon Small>fa:far fa-trash-alt</MIcon>
+                                    <MListItemTitle Class="ml-2"> Delete </MListItemTitle>
+                                </MListItem>
+                            </MList>
+                        </ChildContent>
+                    </MMenu>
+                    break;
+                default:
+                    @context.Value
+                    break;
+            }
+        </ItemColContent>
+    </MDataTable>
+
+    <MCardText>
+        <div class="d-flex">
+            <div class="mr-auto pt-3 text-btn neutral-lighten-1--text">Showing @((_userPage.PageIndex-1)*_userPage.PageSize+1) to @(_userPage.PageIndex*_userPage.PageSize) of @_userPage.CurrentCount entries</div>
+            @if (_userPage.PageCount > 0)
+            {
+                <MPagination @bind-Value="_userPage.PageIndex" Color="primary" Circle Length=@_userPage.PageCount></MPagination>
+            }
+        </div>
+    </MCardText>
+</MCard>
+
+<Add @bind-Visible=_visible Submit="AddUserData"></Add>
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/User/List.razor.cs
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/User/List.razor.cs
@ -0,0 +1,34 @@
+namespace Sinet.Universal.Admin.Web.Pages.App.User
+{
+    public partial class List
+    {
+        public bool? _visible;
+        public UserPage _userPage = new(UserService.GetList());
+        private List<int> _pageSizes = new() { 10, 25, 50, 100 };
+        private readonly List<DataTableHeader<UserDto>> _headers = new()
+        {
+            new() { Text = "USER", Value = nameof(UserDto.UserName), CellClass = "" },
+            new() { Text = "EMAIL", Value = nameof(UserDto.Email) },
+            new() { Text = "ROLE", Value = nameof(UserDto.Role) },
+            new() { Text = "PLAN", Value = nameof(UserDto.Plan) },
+            new() { Text = "STATUS", Value = nameof(UserDto.Status) },
+            new() { Text = "ACTIONS", Value = "Action", Sortable = false }
+        };
+        private readonly Dictionary<string, string> _roleIconMap = UserService.GetRoleIconMap();
+
+        private void NavigateToDetails(string id)
+        {
+            Nav.NavigateTo($"/app/user/view/{id}");
+        }
+
+        private void NavigateToEdit(string id)
+        {
+            Nav.NavigateTo($"/app/user/edit/{id}");
+        }
+
+        private void AddUserData(UserDto userData)
+        {
+            _userPage.UserDatas.Insert(0, userData);
+        }
+    }
+}
--- a/src/client/Sinet.Universal.Admin.Web/Pages/App/User/View.razor
+++ b/src/client/Sinet.Universal.Admin.Web/Pages/App/User/View.razor
@ -0,0 +1,260 @@
+@page "/app/user/view"
+@page "/app/user/view/{Id}"
+@inherits ProComponentBase
+
+<MRow>
+    <MCol Md="8">
+        <MCard Height="298" class="pt-2 pb-2">
+            <MCardText>
+                <MRow>
+                    <MCol Cols="@("auto")">
+                        <div style="width:300px;" class="text-center">
+                            @if (string.IsNullOrEmpty(UserData.HeadImg))
+                            {
+                                string color = UserData.Color;
+                                <MAvatar Size="120" Color="@($"{color}-lighten-5")">
+                                    <span class="@($"{color}--text text-h3")">@UserData.SampleName</span>
+                                </MAvatar>
+                            }
+                            else
+                            {
+                                <MAvatar Size="120">
+                                    <MImage Contain Src="@UserData.HeadImg" />
+                                </MAvatar>
+                            }
+                            <h5 class="mt-1">@UserData.FullName</h5>
+                            <span class="mt-1 text-caption">@UserData.Email</span>
+                            <MRow NoGutters class="mt-4">
+                                <MCol Md="6" class="text-center">
+                                    <h5>@UserData.Sales</h5>
+                                    <span class="text-body2">Monthly Sales</span>
+                                </MCol>
+                                <MCol Md="6" class="text-center">
+                                    <h5>@UserData.Profit</h5>
+                                    <span class="text-body2">Annual Profit</span>
+                                </MCol>
+                            </MRow>
+                        </div>
+                    </MCol>
+                    <MDivider Vertical />
+                    <MCol class="ml-3 d-flex flex-column">
+                        <div class="mb-3 d-flex justify-space-between">
+                            <span class="text-body2 neutral-lighten-1--text"><MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-account-outline</MIcon>Username</span>
+                            <span class="text-caption">@UserData.UserName</span>
+                        </div>
+                        <div class="mb-3 d-flex justify-space-between">
+                            <span class="text-body2 neutral-lighten-1--text"><MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-check</MIcon>Status</span>
+                            <span class="text-caption">@UserData.Status</span>
+                        </div>
+                        <div class="mb-3 d-flex justify-space-between">
+                            <span class="text-body2 neutral-lighten-1--text"><MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-star-outline</MIcon>Role</span>
+                            <span class="text-caption">@UserData.Role</span>
+                        </div>
+                        <div class="mb-3 d-flex justify-space-between">
+                            <span class="text-body2 neutral-lighten-1--text"><MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-flag-outline</MIcon>Country</span>
+                            <span class="text-caption">@UserData.Country</span>
+                        </div>
+                        <div class="mb-3 d-flex justify-space-between">
+                            <span class="text-body2 neutral-lighten-1--text"><MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-phone-outline</MIcon>Contact</span>
+                            <span class="text-caption">@UserData.Contact</span>
+                        </div>
+                        <div class="flex-grow-1 d-flex align-end">
+                            <MButton MinWidth="100" class="primary rounded-pill">Edit</MButton>
+                            <MButton Outlined MinWidth="100" Color="red" class="ml-6 rounded-pill">Delete</MButton>
+                        </div>
+                    </MCol>
+                </MRow>
+            </MCardText>
+        </MCard>
+    </MCol>
+    <MCol Md="4">
+        <MCard class="pa-2 fill-height d-flex flex-column justify-space-between">
+            <MCardText>
+                <div class="d-flex justify-space-between">
+                    <h6>Current Plan</h6>
+                    <MChip Small class="sample-green--text lighten-green"> @UserData.Plan </MChip>
+                </div>
+                <span class="mt-1 neutral-lighten-4--text">July 22, 2021</span>
+                <div class="mt-6 d-flex flex-column text-body2 neutral-lighten-1--text">
+                    <span>5 Users</span>
+                    <span class="mt-3">10 GB storage</span>
+                    <span class="mt-3">Basic Support</span>
+                </div>
+            </MCardText>
+            <MCardActions class="d-flex justify-center">
+                <MButton Width="340" class="primary text-capitalize rounded-pill">Upgrade Plan</MButton>
+            </MCardActions>
+        </MCard>
+    </MCol>
+</MRow>
+
+<MRow>
+    <MCol Md="8">
+        <MCard>
+            <MCardTitle>
+                <MIcon Size=20 Color="sample-green" Class="mr-1">mdi-lock-open-outline</MIcon>
+                <span class="text-h6">Permission</span>
+            </MCardTitle>
+            <MCardSubtitle class="ml-6 text-btn neutral-lighten-4--text">
+                Permission according to roles
+            </MCardSubtitle>
+            <MCardText>
+                <MDataTable HideDefaultFooter Headers="_headers" TItem="PermissionDto" Items="_permissions" ItemKey="r => r.Module" Class="table-header-fill table-border-solid">
+                    <HeaderColContent Context="header">
+                        <span class="text-body neutral-lighten-1--text">@header.Text</span>
+                    </HeaderColContent>
+                    <ItemColContent>
+                        @switch (context.Header.Value)
+                        {
+                            case nameof(PermissionDto.Module):
+                                <span class="text-body neutral-lighten-2--text">@context.Value</span>
+                                break;
+                            case nameof(PermissionDto.Read):
+                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Read"></MCheckbox>
+                                break;
+                            case nameof(PermissionDto.Write):
+                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Write"></MCheckbox>
+                                break;
+                            case nameof(PermissionDto.Create):
+                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Create"></MCheckbox>
+                                break;
+                            case nameof(PermissionDto.Delete):
+                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Delete"></MCheckbox>
+                                break;
+                            default:
+                                @context.Value
+                                break;
+                        }
+                    </ItemColContent>
+                </MDataTable>
+            </MCardText>
+        </MCard>
+    </MCol>
+    <MCol Md="4">
+        <MCard class="pa-2">
+            <MCardTitle class="text-h8">
+                User Timeline
+            </MCardTitle>
+            <MCardText>
+                <MTimeline Dense class="mr-n2 ml-n10 pro-timeline-before divider-align-start m-timeline-flat">
+                    <MTimelineItem Class="mt-0" Small Color="transparent">
+                        <IconContent>
+                            <MIcon class="sample-green--text">mdi-adjust</MIcon>
+                        </IconContent>
+                        <ChildContent>
+                            <div class="d-flex justify-space-between align-center">
+                                <span class="text-body">
+                                    12 Invoices have been paid
+                                </span>
+                                <span class="neutral-lighten-4--text">
+                                    12 min ago
+                                </span>
+                            </div>
+                            <span class="text-body2 mt-1">
+                                Invoices have been paid to the company.
+                            </span>
+                            <p class="mt-4 mb-0 d-flex align-center">
+                                <img class="mr-1" width="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABdCAYAAADzCKvfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODA4M0IxNEM4MzdEODk1OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQTY5RDZFNjk2NDUxMUU5QjgzM0NGNjBGOUVEM0JBMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyQTY5RDZFNTk2NDUxMUU5QjgzM0NGNjBGOUVEM0JBMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTgwODNCMTRDODM3RDg5NTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTgwODNCMTRDODM3RDg5NTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4beZrOAAAF7klEQVR42uydCWwUVRjH/zs7sy03RG3wSNFYsChRFJCmIRIkEeUQiYaAiBIFISWLCBEPUCLEKAgkdAGNFxAPgkIIJLoRFUnwQFHSRDCBoqhNEQmoaFm6O5ffN2+2uy3aUizH7nxf8vp2Znaafb/3nTM7b0Ou64Kl3jRLHNu+g7ep9UQeSAio1nU9XhCJHGjNeTr/SdTXR23bZhBR5JHwdKdMM0ZdZWvA6PXJZEk2EE3TEAqFchsGabvjOOnNKIFBa8Dolm3P4BMZQyQSyXkgLAwklYHSAIb2xNtFIvEWoaR9ihYO5wWQpqLRmBw1xqhFYOpdt7qwoKBZjdEanJKmIR8lTJOtG0aDxpiWNYNdRouONt9FpwnXCIzvWxgMa0+8fWFhPLBQ0gHEIJ9pplIeGAouSCSTaF9QEA8sFM+UyL+wxiR9jbFJYxKuW0IaE/tXnxIUYd8ZITB+SPHyM87T8h5KS1GUTUnPpB8KzMmT0cBAsRvnK41MydOYNBjH6XnCB5O35hP2UwxO5Dja2H4+1hSengXGYTCJRDRvHS0P1qbo4mkLRRpuZsunRSlUx/JWU3juqdZhB9J6oHkdacgsCkljXDIhTvWd5gumBv8TiDyFw3CY/Uwz77HYr/hQApennFb2KwgEikARKAJFoAgUgSJQBIpAESgCRaCICBSBIlAEikARKAJFoDSRkJkSKGkx9lXBGGJA79wBxrAu0Or+ECh48RFgJ/dzgEQC4VXzBQoOfKH6Hr2Au6LAnq8ECo6lPwV9jB7XiE/xpLvfn/ibb/gCXYsuCCjn9wb7JX3ozx7gSC1/uxm4vIdoCq69WfU/EJhvtwNFVwgUlN6k+k0fAO98CRT3FCi4rr/qf0MmCgUdill6I9Als20VCxQVcUaW+1oDuJECgeJJWjv2Utq/a5tA0ZIngTfWZHYsnSVQwpteyzhZls17YXzzaYChuA4Q8zVj+dOeT/Fk4aTzfinhvEExtr4L7Ib3LWD73pnAivfVga2HoFc+HkQoLrBkono5dzKcjp1hlt1Grx9U++atgLF+ZbCgGB+uBz7z8UyZm8lTnloFTBuuNibNhLF6UUAKQvYlL/ha8sR9sLLqHZeKQmvJRuipkRSVPgEq5sHYsRmYvZwyvSRwuAb4/QhQn6BGkatdB6qXLqMaqj/Mq3rnLhRjyxp1tY1l6rOnfqDag8CQMcBGgnKcdqzbRa285f97zw2wX90Op7BjbkHxosrCqX6UmQ6zezHCxw5D+2gDmRM52m0fAwebnHQxtaNZ2zzmWQ8DA4fyE04U0kl7PqeCcs12hMdvhjN8Qm5B0d9a5mWunrTvBGNcXy83aZAyaiPuBPoMpBA9AHZpP3LCnZQPWvoAsIMg1NF7FrwC3LKaSoSZqqicQiH9x6+VA2+Lyfurrq6S+ig/NKSfxQe2w38ehVZ6qTKJhksHDGEcDXAU7PJhBKBL8yZSRd55IwF5ex3w66nT6/xSC7vbmV29sxwHlnoKNXZONMXYuZVmd4ICQlww/zlg0HCYV/dpXVXddxDAbeFaGPu/A74nf3PoZ352Hxg16YyBnFPzMX7aBzxzP/De7qz65iWYYyb/XwWH2et6gFvu5CkujLWLgd6kCcdrgfTKAiOuJCAP4UKXNofCEcZ4lELqNErKJlAoLRsNpNegWLRJ5fUXuOhtrSH69GHAm+QQR1MyNXE2cPvd6lDl/Fb7kLyAYrz+vALC97WefJlC5mB1YGw/mFnpfLDMZ5l/L3jyHGD8YJV0Ue5hr4znhNmcHShd/f6xxSozHVoEZ0MN5R/dkEvSpubjbKmBtp4q3f1VwIBbYY2tgGtEkGvSplDsi7rDrliAXBf5epdAESgCRaAIFIEiUASKQBEoAkWgCBQRgXI6UFzHCTSI7PFrWihUzS94bUUroGB43Dx+Dwjx0PkXCPwF973Vwi0gL1dF/08Nabz6aIx56LzAPh2o5OVJ4f+ggOu6QVSYmKHr3g8OhNIAUpZVwgvVerYVIE0hDVBrS2padUTXvXuZ/wgwACqjAW/Ht+8LAAAAAElFTkSuQmCC" />
+                                <span class="ml-2 neutral-lighten-2--text">invoice.pdf</span>
+                            </p>
+                        </ChildContent>
+                    </MTimelineItem>
+                    <MTimelineItem Class="mb-4" Small Color="transparent">
+                        <IconContent>
+                            <MIcon class="error--text">mdi-adjust</MIcon>
+                        </IconContent>
+                        <ChildContent>
+                            <div class="d-flex justify-space-between align-center">
+                                <span class="text-body">
+                                    Client Meeting
+                                </span>
+                                <span class="neutral-lighten-4--text">
+                                    45 min ago
+                                </span>
+                            </div>
+                            <span class="text-body2 mt-1">
+                                Project meeting with john @@10:15am.
+                            </span>
+                            <MListItem class="grow mt-4 pa-0">
+                                <MListItemAvatar class="pa-0">
+                                    <MImage Src="/img/avatar/10.svg">
+                                    </MImage>
+                                </MListItemAvatar>
+                                <MListItemContent>
+                                    <MListItemTitle class="neutral-lighten-1--text">John Doe (Client)</MListItemTitle>
+                                    <MListItemSubtitle class="neutral-lighten-2--text">CEO of Infibeam</MListItemSubtitle>
+                                </MListItemContent>
+                            </MListItem>
+                        </ChildContent>
+                    </MTimelineItem>
+
+                    <MTimelineItem Class="mb-4" Color="transparent" Small>
+                        <IconContent>
+                            <MIcon class="dark-yellow--text">mdi-adjust</MIcon>
+                        </IconContent>
+                        <ChildContent>
+                            <div class="d-flex justify-space-between align-center">
+                                <span class="text-body">
+                                    Create a new project for client
+                                </span>
+                                <span class="neutral-lighten-4--text">
+                                    2 days ago
+                                </span>
+                            </div>
+                            <span class="text-body2 mt-1">
+                                Add files to new design folder
+                            </span>
+                        </ChildContent>
+                    </MTimelineItem>
+                </MTimeline>
+            </MCardText>
+        </MCard>
+    </MCol>
+</MRow>
+
+<Sinet.Universal.Admin.Web.Pages.App.Invoice.Components.InvoiceList />
+
+@code {
+
+    private List<DataTableHeader<PermissionDto>> _headers = new List<DataTableHeader<PermissionDto>>
+    {
+        new() { Text = "MODULE", Sortable = false, Value = nameof(PermissionDto.Module) },
+        new() { Text = "READ", Sortable = false, Value = nameof(PermissionDto.Read), Align = DataTableHeaderAlign.Center },
+        new() { Text = "WRITE", Sortable = false, Value = nameof(PermissionDto.Write), Align = DataTableHeaderAlign.Center },
+        new() { Text = "CREATE", Sortable = false, Value = nameof(PermissionDto.Create), Align = DataTableHeaderAlign.Center },
+        new() { Text = "DELETE", Sortable = false, Value = nameof(PermissionDto.Delete), Align = DataTableHeaderAlign.Center }
+    };
+
+    private List<PermissionDto> _permissions = UserService.GetPermissionsList();
+    private UserDto? _userData;
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; } = null!;
+
+    [CascadingParameter]
+    private IPageTabsProvider? PageTabsProvider { get; set; }
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    public UserDto UserData
+    {
+        get { return _userData ?? UserService.GetList().First(); }
+        set { _userData = value; }
+    }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _userData = UserService.GetList().FirstOrDefault(u => u.Id == Id);
+
+        UpdateTabTitle();
+    }
+
+    private void UpdateTabTitle()
+    {
+        PageTabsProvider?.UpdateTabTitle(NavigationManager.GetAbsolutePath(), () => T("View of {0}", UserData.FullName));
+    }
+
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`/* Write here your styles for the Index page */`