Admin Dashboard Using Dynamic Data via HTML CSS in apex

jABER IT LTDjABER IT LTD -
0
Create Admin Dashboard Using Dynamic Data via HTML CSS In Oracle Apex

Create Admin Dashboard Using Dynamic Data via HTML CSS In Oracle Apex

 

1. Create a Page, Name- Admin Dashboard in HTML and CSS
2. Create a Region -> 
3. Region Type -> PL/SQL Dynamic Content ->
 Paste the following code 

	    HTP.P('<!--DOCTYPE html-->');
HTP.P('<html lang="en" dir="ltr">');
  HTP.P('<head>');
    HTP.P('<meta charset="UTF-8">');
    HTP.P('<title> Responsiive Admin Dashboard | CodingLab </title>');
    HTP.P('<link rel="stylesheet" href="style.css">');
    HTP.P('<link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">');
     HTP.P('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
   HTP.P('</head>');
HTP.P('<style>

/* Googlefont Poppins CDN Link */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.sidebar{
  POSITION: FIXED;
  height: 100%;
  width: 240px;
  background: #0A2558;
  transition: ALL 0.5s ease;
}
.sidebar.ACTIVE{
  width: 60px;
}
.sidebar .logo-details{
  height: 80px;
  display: flex;
  align-items: center;
}
.sidebar .logo-details i{
  font-SIZE: 28px;
  font-weight: 500;
  color: #fff;
  MIN-width: 60px;
  text-align: center
}
.sidebar .logo-details .logo_name{
  color: #fff;
  font-SIZE: 24px;
  font-weight: 500;
}
.sidebar .NAV-links{
  margin-top: 10px;
}
.sidebar .NAV-links li{
  POSITION: relative;
list-style: none;
  height: 50px;
}
.sidebar .NAV-links li A{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: NONE;
  transition: ALL 0.4s ease;
}
.sidebar .NAV-links li a.ACTIVE{
  background: #081D45;
}
.sidebar .NAV-links li A:hover{
  background: #081D45;
}
.sidebar .NAV-links li i{
  MIN-width: 60px;
  text-align: center;
  font-SIZE: 18px;
  color: #fff;
}
.sidebar .NAV-links li a .links_name{
  color: #fff;
  font-SIZE: 15px;
  font-weight: 400;
  white-SPACE: nowrap;
}
.sidebar .NAV-links .log_out{
  POSITION: absolute;
  bottom: 0;
  width: 100%;
}
.home-section{
  POSITION: relative;
  background: #f5f5f5;
  MIN-height: 100vh;
  width: calc(100% - 240px);
  LEFT: 240px;
  transition: ALL 0.5s ease;
}
.sidebar.ACTIVE ~ .home-section{
  width: calc(100% - 60px);
  LEFT: 60px;
}
.home-section NAV{
  display: flex;
  justify-CONTENT: SPACE-BETWEEN;
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
  POSITION: FIXED;
  width: calc(100% - 240px);
  LEFT: 240px;
  z-INDEX: 100;
  padding: 0 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: ALL 0.5s ease;
}
.sidebar.ACTIVE ~ .home-section NAV{
  LEFT: 60px;
  width: calc(100% - 60px);
}
.home-section nav .sidebar-button{
  display: flex;
  align-items: center;
  font-SIZE: 24px;
  font-weight: 500;
}
nav .sidebar-button i{
  font-SIZE: 35px;
  margin-RIGHT: 10px;
}
.home-section nav .SEARCH-box{
  POSITION: relative;
  height: 50px;
  MAX-width: 550px;
  width: 100%;
  margin: 0 20px;
}
nav .SEARCH-box input{
  height: 100%;
  width: 100%;
  OUTLINE: NONE;
  background: #F5F6FA;
  border: 2px solid #EFEEF1;
  border-radius: 6px;
  font-SIZE: 18px;
  padding: 0 15px;
}
nav .SEARCH-box .bx-SEARCH{
  POSITION: absolute;
  height: 40px;
  width: 40px;
  background: #2697FF;
  RIGHT: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-SIZE: 22px;
  transition: ALL 0.4 ease;
}
.home-section nav .PROFILE-details{
  display: flex;
  align-items: center;
  background: #F5F6FA;
  border: 2px solid #EFEEF1;
  border-radius: 6px;
  height: 50px;
  MIN-width: 190px;
  padding: 0 15px 0 2px;
}
nav .PROFILE-details img{
  height: 40px;
  width: 40px;
  border-radius: 6px;
  OBJECT-fit: cover;
}
nav .PROFILE-details .admin_name{
  font-SIZE: 15px;
  font-weight: 500;
  color: #333;
  margin: 0 10px;
  white-SPACE: nowrap;
}
nav .PROFILE-details i{
  font-SIZE: 25px;
  color: #333;
}
.home-section .home-CONTENT{
  POSITION: relative;
  padding-top: 104px;
}
.home-content .overview-boxes{
  display: flex;
  align-items: center;
  justify-CONTENT: SPACE-BETWEEN;
  flex-wrap: wrap;
  padding: 0 20px;
  margin-bottom: 26px;
}
.overview-boxes .box{
  display: flex;
  align-items: center;
  justify-CONTENT: center;
  width: calc(100% / 4 - 15px);
  background: #fff;
  padding: 15px 14px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
  font-SIZE: 20px;
  font-weight: 500;
}
.home-content .box .PRICE{
  display: INLINE-BLOCK;
  font-SIZE: 35px;
  margin-top: 16px;
  font-weight: 500;
}
.home-content .box .INDICATOR{
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.home-content .box .INDICATOR i{
  height: 20px;
  width: 20px;
  background: #8FDACB;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-SIZE: 20px;
  margin-RIGHT: 5px;
}
.box .INDICATOR i.DOWN{
  background: #e87d88;
}
.home-content .box .INDICATOR .text{
  font-SIZE: 12px;
}
.home-content .box .cart{
  display: INLINE-BLOCK;
  font-SIZE: 32px;
  height: 50px;
  width: 50px;
  background: #cce5ff;
  line-height: 50px;
  text-align: center;
  color: #66b0ff;
  border-radius: 12px;
  margin: -3px 0 0 6px;
}
.home-content .box .cart.two{
   color: #2BD47D;
   background: #C0F2D8;
 }
.home-content .box .cart.three{
   color: #ffc233;
   background: #ffe8b3;
 }
.home-content .box .cart.four{
   color: #e05260;
   background: #f7d4d7;
 }
.home-content .total-ORDER{
  font-SIZE: 20px;
  font-weight: 500;
}
.home-content .sales-boxes{
  display: flex;
  justify-CONTENT: SPACE-BETWEEN;

  /* padding: 0 20px; */
}

/* left box */
.home-content .sales-boxes .recent-sales{
  width: 65%;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.home-content .sales-boxes .sales-details{
  display: flex;
  align-items: center;
  justify-CONTENT: SPACE-BETWEEN;
}
.sales-boxes .box .title{
  font-SIZE: 24px;
  font-weight: 500;

  /* margin-bottom: 10px; */
}
.sales-boxes .sales-details li.topic{
  font-SIZE: 20px;
  font-weight: 500;
}
.sales-boxes .sales-details li{
list-style: none;
  margin: 8px 0;
}
.sales-boxes .sales-details li A{
  font-SIZE: 18px;
  color: #333;
  font-SIZE: 400;
  text-decoration: NONE;
}
.sales-boxes .box .button{
  width: 100%;
  display: flex;
  justify-CONTENT: flex-END;
}
.sales-boxes .box .button A{
  color: #fff;
  background: #0A2558;
  padding: 4px 12px;
  font-SIZE: 15px;
  font-weight: 400;
  border-radius: 4px;
  text-decoration: NONE;
  transition: ALL 0.3s ease;
}
.sales-boxes .box .button A:hover{
  background:  #0d3073;
}

/* Right box */
.home-content .sales-boxes .top-sales{
  width: 35%;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px 0 0;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.sales-boxes .top-sales li{
  display: flex;
  align-items: center;
  justify-CONTENT: SPACE-BETWEEN;
  margin: 10px 0;
}
.sales-boxes .top-sales li A img{
  height: 40px;
  width: 40px;
  OBJECT-fit: cover;
  border-radius: 12px;
  margin-RIGHT: 10px;
  background: #333;
}
.sales-boxes .top-sales li A{
  display: flex;
  align-items: center;
  text-decoration: NONE;
}
.sales-boxes .top-sales li .product,
.price{
  font-SIZE: 17px;
  font-weight: 400;
  color: #333;
}

/* Responsive Media Query */
@media (max-width: 1240px) {
  .sidebar{
    width: 60px;
  }
  .sidebar.ACTIVE{
    width: 220px;
  }
  .home-section{
    width: calc(100% - 60px);
    LEFT: 60px;
  }
  .sidebar.ACTIVE ~ .home-section{

    /* width: calc(100% - 220px); */
    OVERFLOW: hidden;
    LEFT: 220px;
  }
  .home-section NAV{
    width: calc(100% - 60px);
    LEFT: 60px;
  }
  .sidebar.ACTIVE ~ .home-section NAV{
    width: calc(100% - 220px);
    LEFT: 220px;
  }
}
@media (max-width: 1150px) {
  .home-content .sales-boxes{
    flex-direction: COLUMN;
  }
  .home-content .sales-boxes .box{
    width: 100%;
    OVERFLOW-x: scroll;
    margin-bottom: 30px;
  }
  .home-content .sales-boxes .top-sales{
    margin: 0;
  }
}
@media (max-width: 1000px) {
  .overview-boxes .box{
    width: calc(100% / 2 - 15px);
    margin-bottom: 15px;
  }
}
@media (max-width: 700px) {
  nav .sidebar-button .dashboard,
  nav .PROFILE-details .admin_name,
  nav .PROFILE-details i{
    display: NONE;
  }
  .home-section nav .PROFILE-details{
    height: 50px;
    MIN-width: 40px;
  }
  .home-content .sales-boxes .sales-details{
    width: 560px;
  }
}
@media (max-width: 550px) {
  .overview-boxes .box{
    width: 100%;
    margin-bottom: 15px;
  }
  .sidebar.ACTIVE ~ .home-section nav .PROFILE-details{
    display: NONE;
  }
}

</style>');

HTP.P('<body>');

FOR u IN (SELECT (SELECT COUNT (s.OID)
          FROM SALES_DTLS s, PURCHASE_DETALIS P
         WHERE     s.PRODUCT_ID = p.PRODUCT_ID
               AND s.PROOUCT_SIZE = p.PROOUCT_SIZE)
          AS Total_Order,

(SELECT SUM (s.TOTAL)
   FROM SALES_DTLS s, PURCHASE_DETALIS P
  WHERE s.PRODUCT_ID = p.PRODUCT_ID AND s.PROOUCT_SIZE = p.PROOUCT_SIZE)
          AS Total_sales,
       (  (SELECT SUM (s.TOTAL)
             FROM SALES_DTLS s, PURCHASE_DETALIS P
            WHERE     s.PRODUCT_ID = p.PRODUCT_ID
                  AND s.PROOUCT_SIZE = p.PROOUCT_SIZE)
        - (SELECT SUM (p.TOTAL) v_Total_Profit
             FROM PURCHASE_DETALIS P, SALES_DTLS s
            WHERE     s.PRODUCT_ID = p.PRODUCT_ID
                  AND s.PROOUCT_SIZE = p.PROOUCT_SIZE))
          AS Total_Profit,
       (SELECT SUM (t.STK_QNTY)
          FROM STOCK t, SALES_DTLS s
         WHERE     s.PRODUCT_ID = t.PRODUCT_ID
               AND s.PROOUCT_SIZE = t.PROOUCT_SIZE)
          Current_stock
  FROM DUAL)
loop
htp.p('<div class="home-content">
      <div class="overview-boxes">
        <div class="box">
          <div class="right-side">
            <div class="box-topic">Total Order</div>
            <div class="PRICE">'||u.Total_Order||'</div>
            <div class="indicator">
              <i class="bx bx-up-arrow-alt"></i>
              <span class="text">Up from yesterday</span>
            </div>
          </div>
          <i class="bx bx-cart-alt cart"></i>
        </div>
        <div class="box">
          <div class="right-side">
            <div class="box-topic">Total Sales</div>
            <div class="PRICE">$'||u.Total_sales||'</div>
            <div class="indicator">
              <i class="bx bx-up-arrow-alt"></i>
              <span class="text">Up from yesterday</span>
            </div>
          </div>
          <i class="bx bxs-cart-add cart two" ></i>
        </div>
        <div class="box">
          <div class="right-side">
            <div class="box-topic">Total Profit</div>
            <div class="PRICE">$'||u.Total_Profit||'</div>
            <div class="indicator">
              <i class="bx bx-up-arrow-alt"></i>
              <span class="text">Up from yesterday</span>
            </div>
          </div>
          <i class="bx bx-cart cart three" ></i>
        </div>
        <div class="box">
          <div class="right-side">
            <div class="box-topic">Total Return</div>
            <div class="PRICE">'||u.Current_stock||'</div>
            <div class="indicator">
              <i class="bx bx-down-arrow-alt down"></i>
              <span class="text">Down From Today</span>
            </div>
          </div>
          <i class="bx bxs-cart-download cart four" ></i>
        </div>
      </div>');
END LOOP;
HTP.P('</body>');
HTP.P('</html>');
 

🔗 Demo Application-
            URL- Demo Application
            Username - demo, Pass- demo
 

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.

Then Enjoy.........................

Post a Comment

Hlo Sir

Previous Post Next Post