Uena - Restaurent Angular Admin Dashboard

Uena - Restaurent Angular Admin Dashboard

Uena

Uena - Restaurent Angular Admin Dashboard

This documentation is last updated on 16 February 2024.

Thank you for purchasing this HTML template.

If you like this template, Please support us by rating this template with 5 stars

Getting started -

Before you begin, make sure you have Node and an npm package manager. installed on your computer.

Download node nodejs.org.

Check your node version, run node -v

Angular Setup -

Open terminal and run npm install -g @angular/cli

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.Then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build for Production

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Folder Structure -

  • src
    • app
      • _services
      • Components
        • bootstrap
          • accordion
          • alert
          • badge
          • button
          • button-group
          • cards
          • carousel
          • dropdown
          • grid
          • list-group
          • media-object
          • model
          • pagination
          • popover
          • progressbar
          • table
          • tabs
          • typography
        • material
          • dzmt-autocomplete
          • dzmt-badge
          • dzmt-bottom-sheet
          • dzmt-button
          • dzmt-button-toggle
          • dzmt-card
          • dzmt-checkbox
          • dzmt-chips
          • dzmt-datepicker
          • dzmt-dialog
          • dzmt-divider
          • dzmt-expansion
          • dzmt-form-field
          • dzmt-grid-list
          • dzmt-icon
          • dzmt-input
          • dzmt-list
          • dzmt-menu
          • dzmt-paginator
          • dzmt-progress-bar
          • dzmt-progress-spinner
          • dzmt-radio
          • dzmt-ripple
          • dzmt-select
          • dzmt-sidenav
          • dzmt-slider
          • dzmt-slide-toggle
          • dzmt-snack-bar
          • dzmt-sort
          • dzmt-stepper
          • dzmt-table
          • dzmt-tabs
          • dzmt-toolbar
          • dzmt-tooltip
          • dzmt-tree
      • elements
        • admin-layout
        • breadcrumb
        • chart-config
        • chatbox
        • dropdown
        • footer
        • header
        • nav-header
        • navigation
        • pagination
        • short-cods
        • widget
      • Pages
        • analytics
        • dashboard
        • customers
        • order-detail
        • order-list
        • reviews
        • icone
          • flat-icons
          • svg-icons
        • widget
          • wg-card
          • wg-chart
          • wg-list
        • apps
          • calender
          • email
            • compose
            • inbox
            • read
          • post-details
          • profile
          • shop
            • checkout
            • ecom-customers
            • invoice
            • order
            • product-detail
            • product-grid
            • product-list
        • CMS
          • blog
          • blog-add
          • blog-category
          • content
          • content-add
          • email-add
          • email-template
          • menus
        • Authentication
          • forgot-password
          • lock-screen
          • login
          • login 1
          • register
        • forms
          • editor
          • elements
          • picker
          • form-validate
        • error
          • empty
          • error400
          • error403
          • error404
          • error500
          • error503
      • Plugins
        • sweet alert
        • toastr
        • light-gallery
        • select2
        • charts
          • apex
            • area
            • line
            • column chart
            • bar
            • mixed
            • temeline
            • candlestick
            • pie/ donuts
            • radar
            • radialbar / circle
            • polar
            • bubble
            • scatter
            • heatmap
            • sparklines
          • chart-js
            • general charts
            • animation charts
            • area
            • bar
            • bubble
            • line

  • angular.json

    Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more.

  • node_modules

    All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install.

  • package.json

    Contains all dependencies used for production and development.

  • src

    Contains all Angular Typescript code, assets and basically everything the end user will have access to.

  • tsconfig.json

    TypeScript compiler configuration.

Theme Features -

src/index.html


<body 
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="wide"
direction="ltr"
data-primary="color_1"
>

RTL

                
<html dir="rtl" class="rtl" lang="en">

<body 
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="wide"
direction="rtl"
data-primary="color_1"
>

Color Theme -

So many color option available

  • color_1
  • color_2
  • color_3
  • color_4
  • color_5
  • color_6
  • color_7
  • color_8
  • color_9
  • color_10
  • color_11
  • color_12
  • color_13
  • color_14
  • color_15
<body 
data-typography="poppins" data-theme-version="light" data-layout="vertical" data-nav-headerbg="color_1" data-headerbg="color_1" data-sidebar-style="full"
data-sibebarbg="color_1" data-sidebar-position="fixed" data-header-position="fixed" data-container="wide" direction="ltr" data-primary="color_1">


data-typography: "poppins",  		More Options => ["poppins" , "roboto" , "Open Sans" , "Helventivca" ]
data-theme-version: "light",       	More Options => ["light" , "dark"]
data-layout: "horizontal",   		More Options => ["horizontal" , "vertical"]
data-primary: "color_11",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-headerBg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-nav-headerbg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-sibebarbg: "color_11",		More Options => ["color_1," , "color_2," ..... "color_15"]
data-sidebar-style: "compact",		More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
data-sidebar-position: "static",	More Options => ["static" , "fixed"]
data-header-position: "fixed",		More Options => ["static" , "fixed"]
data-container: "full",		        More Options => ["full" , "wide" , "wide-box"]
direction: direction		    	More Options => ["ltr" , "rtl"]



<body 
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_12"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_12"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_1"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="mini"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_1"
>


<body
data-typography="poppins"
data-theme-version="dark"
data-layout="vertical"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="mini"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_1"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_9"
data-headerbg="color_1"
data-sidebar-style="mini"
data-sibebarbg="color_9"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_9"
>


<body
data-typography="poppins"
data-theme-version="dark"
data-layout="vertical"
data-nav-headerbg="color_7"
data-headerbg="color_1"
data-sidebar-style="modern"
data-sibebarbg="color_7"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_7"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="horizontal"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="static"
data-container="full"
direction="ltr"
data-primary="color_5"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="horizontal"
data-nav-headerbg="color_1"
data-headerbg="color_1"
data-sidebar-style="compact"
data-sibebarbg="color_2"
data-sidebar-position="fixed"
data-header-position="static"
data-container="full"
direction="ltr"
data-primary="color_2"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_15"
data-headerbg="color_1"
data-sidebar-style="overlay"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="wide-boxed"
direction="ltr"
data-primary="color_15"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="horizontal"
data-nav-headerbg="color_14"
data-headerbg="color_14"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_14"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_8"
data-headerbg="color_1"
data-sidebar-style="compact"
data-sibebarbg="color_8"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_8"
>


<body
data-typography="poppins"
data-theme-version="light"
data-layout="vertical"
data-nav-headerbg="color_1"
data-headerbg="color_9"
data-sidebar-style="full"
data-sibebarbg="color_1"
data-sidebar-position="fixed"
data-header-position="fixed"
data-container="full"
direction="ltr"
data-primary="color_9"
>

Plugins included -

Features -

  • Admin Routing

  • Lightbox

  • Charts

  • Shop Pages

  • Email Pages

  • Event Calender

  • Bootstrap Components

  • Material Components

  • Form Elements

  • Form Validation

  • Flat Icons

  • CMS Content

  • Authentication Pages

  • Error Pages

Css Files -

These all file import in styles.css

  • style.css

    Main Style CSS file is globally used

  • deeppurple-amber.css

    Material Css

  • bootstrap.min.css

    Bootstrap Css

  • perfect-scrollbar.css

    Perfect Scrollbar Css

  • lightbox.css

    Lightbox Css

  • metismenujs.css

    Matismenu css

  • dashboard.css

    Custom Css for template

Our Products -

BeGlide: Corporate Business Consultant Agency WordPress Theme

Bheem : Construction WordPress Theme RTL Ready

BeautyZone: Beauty Spa Salon WordPress Theme

Bucklin - Creative Personal Blog WordPress Theme

Archia - Architecture and Interior Design RTL Ready Template

Agency | Creative Multipurpose Bootstrap 4 HTML Template

ConstructZilla : Construction, Renovation & Building HTML Template With RTL Ready

CargoZone - Transport, Cargo, Logistics & Business Multipurpose HTML Template

YogaZone: Yoga, Payment & Meditation Mobile Responsive Bootstrap Html Template

GardenZone | Agriculture, Gardening & Landscaping Responsive HTML Template

Construct : Construction, Building & Maintenance Business Template

ButterFly : Spa, Beauty Salon & Massage Template

CURV: One Page Multipurpose Parallax

BeautyZone: Beauty Spa Salon HTML Template

SportsZone: Sports Club, New & Game Magazine Mobile Responsive Bootstrap HTML Template

MediCo.- Hospital and Doctor Clinic HTML Template

Job Board: Job Portal | Job WebSite HTML Wireframe

Industry - Factory & Industrial HTML Template

Le Mars - Minimal Personal Blog HTML Template

BizMap - Business Directory Listing HTML Template

Umang Academy : Kindergarden, Kids Play School Template

Kelsey - Creative Personal Blog HTML Template

Bucklin - Creative Personal Blog HTML Template

SmartClass | Education Agency Choching & Tuition HTML Template

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

  • We Will Customize Template According To Your Requirement
  • We Will Upload On Server And Make Sure Your Website is Live
rahulxarma dexignzones@gmail.com

Version History - #back to top

v2.0 - 16 February 2024

  • Added
    1. Flaticon integration now available for enhanced design options and resources.
    2. New Added SVG icons page.
    3. Included CMS page for Content management system.
    4. Sweet Alert Pages has been added.
    5. Added Datepicker for user-friendly date selection and improved website functionality.
    6. Toastr for Attractive and customizable pop-up alerts
  • Update
    1. Updated Angular in latest v17.1.0 for better features and performance.
    2. ng Bootstrap Advanced interactive Components updates
    3. Updated Angular Material in latest v17.1.0 for better features and performance.
    4. Updated Bootstrap 5 in latest v5.3.2 for better features and performance.
    5. Font Awesome v6 for more icons and customization
    6. Apex Chart Advanced interactive chart with real-time updates
    7. Updated Chart JS library for enhanced data visualization capabilities
    8. Migrated to NouiSlider for smoother and more user-friendly sliders
    9. SweetAlert2 for Attractive and customizable pop-up alerts
    10. Light Gallery Enhanced performance, customizable features for a superior user experience.
    11. Documentation Revised and enhanced for better understanding
  • Design Update
    1. Email page now features a left sidebar for mobile size.
    2. WebSite sidebar updated.
  • Bug Fixed
    1. Design issues resolved for consistent, polished visuals.
    2. Addressed Firefox scrolling for smoother browsing experience.

v1.2 - 23 September 2021

  • Update
    1. Updated in angular 12

v1.1 - 23 June 2021

  • Update
    1. Updated latest version of Angular

v1.0 - 03 May 2021

  • Release
    1. Created and uploaded the Uena Admin Dashboard for public use.