Step : 1
======
Create PL/SQL Dynamic Content.
PL/SQL 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");
*{
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(75% / 4 - 0px);
padding: 15px 14px;
border-radius: 12px;
box-shadow: 0 5px 10px rgb(0 0 0 / 47%);
cursor: pointer;
}
.overview-boxes .box-topic{
font-SIZE: 20px;
font-weight: 500;
}
.home-content .box .PRICE{
display: INLINE-BLOCK;
font-SIZE: 24px;
margin-top: 16px;
margin-bottom: 10px;
font-weight: 500;
color: blue;
}
.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 0 ITEM_VALUE FROM DUAL
select A.TOTAL_RENTER, B.TOTAL_DUE_RENTER, C.TODAY_NOTES
FROM
(
SELECT COUNT(NVL(ID,0)) TOTAL_RENTER
FROM RENTER_MST
WHERE COM_ID=:GCOM_ID
AND ID NOT IN (select ID from RENTER_MST WHERE rent_closing_date < sysdate)) A,
(SELECT COUNT(NVL(ID,0)) TOTAL_DUE_RENTER
FROM RENTER_MST
WHERE COM_ID=:GCOM_ID
AND ID NOT IN (
SELECT RENTER_MST_ID
FROM RENT_COLLECTION_MST
where to_number (GET_RENTER_DTL ('PREVIOUS_DUE',RENTER_MST_ID))=0
and RENT_MONTH||RENT_YEAR = LTRIM(RTRIM (TO_CHAR (SYSDATE,'MONTH')))||'-'||LTRIM(RTRIM (TO_CHAR (SYSDATE,'RRRR'))))
AND ID NOT IN (select ID from RENTER_MST WHERE rent_closing_date < LAST_DAY(SYSDATE)
AND to_number (GET_RENTER_DTL ('PREVIOUS_DUE',ID))=0)
AND ID IN (select ID from RENTER_MST WHERE RENT_DATE <= LAST_DAY(SYSDATE) AND COM_ID=:GCOM_ID)) B,
(SELECT COUNT(NVL(ID,0)) TODAY_NOTES
FROM DAILY_NOTE
WHERE COM_ID=:GCOM_ID
AND TO_CHAR (NOTICE_DATE,'DD-MON-RR')= TO_CHAR (sysdate,'DD-MON-RR')) C
)
loop
/*
FOR u IN (
SELECT TO_CHAR(ROUND(SUM(ITEM_VALUE)), '999G99G99G990') ITEM_VALUE
FROM
(
SELECT ITEM_SEQ,INT_ITEM_CD,ITEM_NM,GSIZE_NM,SHADE_NM,MUNIT_NM,SUM(QTY)QTY ,MAX(CTN_SIZE)CTN_SIZE,MAX(MRATE)MRATE,MAX(QTY_CTN)QTY_CTN ,
SUM(ITEM_VALUE) ITEM_VALUE
FROM
(
SELECT I.ITEM_SEQ,INT_ITEM_CD,ITEM_NM,GSIZE_NM,SHADE_NM,MUNIT_NM,INT_OP_QTY QTY,CTN_SIZE,MRATE,ROUND(INT_OP_QTY/CTN_SIZE) QTY_CTN,
ROUND(INT_OP_QTY*MRATE) ITEM_VALUE
FROM INT_OP_BALANCE O,ITEM I,shade s, gsize g ,munit j
WHERE O.INT_ITEM_CD=I.ITEM_CD
AND I.STATUS='Y'
and i.ITM_SIZECD = g.GSIZE_CD(+)
and i.ITM_SHADECD = s.SHADE_CD(+)
and I.ITM_MUNITCD=J.MUNIT_CD(+)
AND INT_OP_QTY>0
UNION ALL
SELECT ITEM_SEQ,ITEM_CD,ITEM_NM,GSIZE_NM,SHADE_NM,MUNIT_NM,QTY,CTN_SIZE,MRATE,ROUND(QTY/CTN_SIZE) QTY_CTN,ROUND(QTY*MRATE) ITEM_VALUE
FROM
(
SELECT DISTINCT(I.ITEM_CD) ITEM_CD, I.ITEM_NM, g.GSIZE_NM, s.SHADE_NM,
J.MUNIT_NM , sum(q.QTY) QTY,I.ITEM_SEQ,
CTN_SIZE,MRATE
FROM ITEM I, shade s, gsize g ,munit j,
VW_GRN_TEM_QTY q
--WHERE q.LOC = :global.loc
WHERE q.LOC = 5
and i.item_cd = q.ITEM
and i.ITM_SIZECD = g.GSIZE_CD(+)
and i.ITM_SHADECD = s.SHADE_CD(+)
and I.ITM_MUNITCD=J.MUNIT_CD(+)
AND I.STATUS='Y'
and q.dt > '15-SEP-2022'
GROUP BY I.ITEM_CD, I.ITEM_NM, g.GSIZE_NM, s.SHADE_NM,
J.MUNIT_NM,I.ITEM_SEQ,CTN_SIZE,MRATE
HAVING SUM(q.QTY)>0
)
)
GROUP BY ITEM_SEQ,INT_ITEM_CD,ITEM_NM,GSIZE_NM,SHADE_NM,MUNIT_NM
ORDER BY ITEM_SEQ ASC
)
)
*/
htp.p('<div class="home-content">
<div class="overview-boxes">
<div class="box box1">
<div class="right-side stock">
<div class="box-topic">TOTAL RENTER</div>
<div class="PRICE">'||u.TOTAL_RENTER||'</div>
<div class="indicator">
<i class="bx bx-right-arrow-alt"></i>
<span class="text">Total</span>
</div>
</div>
<i class="bx bx-cart-alt cart"></i>
</div>
<div class="box box2">
<div class="right-side balance">
<div class="box-topic">TOTAL DUE RENTER</div>
<div class="PRICE">'||U.TOTAL_DUE_RENTER||'</div>
<div class="indicator">
<i class="bx bx-right-arrow-alt"></i>
<span class="text">Total</span>
</div>
</div>
<i class="bx bx-dollar cart three" ></i>
</div>
<div class="box box3">
<div class="right-side balance">
<div class="box-topic">PM Coil</div>
<div class="PRICE">'||U.TODAY_NOTES||'</div>
<div class="indicator">
<i class="bx bx-right-arrow-alt"></i>
<span class="text">Total</span>
</div>
</div>
<i class="bx bx-dollar cart three" ></i>
</div>
<div class="box box4">
<div class="right-side balance">
<div class="box-topic">RM Non Coil</div>
<div class="PRICE">'||0||'</div>
<div class="indicator">
<i class="bx bx-right-arrow-alt"></i>
<span class="text">Total</span>
</div>
</div>
<i class="bx bx-dollar cart three" ></i>
</div>
<div class="box box5">
<div class="right-side balance">
<div class="box-topic">PM Non Coil</div>
<div class="PRICE">'||0||'</div>
<div class="indicator">
<i class="bx bx-right-arrow-alt"></i>
<span class="text">Total</span>
</div>
</div>
<i class="bx bx-dollar cart three" ></i>
</div>
</div>');
END LOOP;
HTP.P('</body>');
HTP.P('</html>');
============================================
Step : 2
=====
Create Item.
Name: P40_VALUE
Step : 3
=====
1. Create Dynamic Action on Click Event.
Action Name : VALUE_RENTER
Selection Type : jQuery Selector
jQuery Selector : .box.box1
Action : Set value
Set Type : Static Assignment
Value : 1
Affected Elements: Item : P40_VALUE
2. Create Dynamic Action on Click Event.
Action Name : VALUE_EX
Selection Type : jQuery Selector
jQuery Selector : .box.box2
Action : Set value
Set Type : Static Assignment
Value : 2
Affected Elements: Item : P40_VALUE
3.
4.
5.
Step : 4
=====
1. Create Classic Report
My Region Name : Renter
Create a Button for Hide Report Region.
Button Name: Hide_1
Create Button Dynamic Action:
Name : Hide_Region
Event : Click
Selection Type : Button
Button: Hide_1
True Action: Set Value
Set Type : Static Assignment
Value : 0
Affected Elements:
Section Type: Item(s)
Item(s): P40_VALUE
2. Create Classic Report
My Region Name : Expanse
Create a Button for Hide Report Region.
Button Name: Hide_2
Create Button Dynamic Action:
Name : Hide_Region
Event : Click
Selection Type : Button
Button: Hide_2
True Action: Set Value
Set Type : Static Assignment
Value : 0
Affected Elements:
Section Type: Item(s)
Item(s): P40_VALUE
3.
4.
5.
Step : 5
=====
1. Create Dynamic Action on item P40_VALUE:
Name : SHOW_HIDE_RENTER
Event: Change
Client-side Condition:
Type: Item=Value
Item: P40_VALUE
Value: 1
True Action : Show
Affected Elements:
Section Type: Region
Region: Renter
2. Create Dynamic Action on item P40_VALUE:
Name : SHOW_HIDE_EX
Event: Change
Client-side Condition:
Type: Item=Value
Item: P40_VALUE
Value: 2
True Action : Show
Affected Elements:
Section Type: Region
Region: Expanse
3. Create Dynamic Action on item P40_VALUE:
.
.
4. Create Dynamic Action on item P40_VALUE:
.
.
5. Create Dynamic Action on item P40_VALUE:
.
.