Step: 1
=====
Download plug-ins
https://drive.google.com/drive/folders/1Lgu31sisnbP37LnlHHxUPHUBTCGk3Qbo?usp=sharing
Step: 2
=====
Go to Share component and Import Plug-ins file
Step: 3
=====
Create a page and region
region Type: APEX Material Cards
SQL Query:
WITH DAT1
AS (SELECT COUNT(ID) value ---BOOKING
FROM AIREXPORT_MST
WHERE COM_ID=:GCOM_ID),
DAT2
AS (SELECT COUNT(ID) value --- HAWB
FROM HAWB_MST
WHERE COM_ID=:GCOM_ID),
DAT6
AS (SELECT COUNT(ID) value --- MAWB
FROM MAWB
WHERE COM_ID=:GCOM_ID),
DAT3
AS (SELECT SUM(B.CBM) value ---CBM
FROM AIREXPORT_MST A, AIREXPORT_GOODS_INFO B
WHERE A.ID=B.AIREXPORT_ID
AND A.COM_ID=:GCOM_ID),
DAT4
AS (SELECT SUM(B.CHA_WEIGHT) value---CHA_WEIGHT
FROM AIREXPORT_MST A, AIREXPORT_GOODS_INFO B
WHERE A.ID=B.AIREXPORT_ID
AND A.COM_ID=:GCOM_ID),
DAT5
AS (SELECT SUM(B.WEIGHT) value---G_WEIGHT
FROM AIREXPORT_MST A, AIREXPORT_GOODS_INFO B
WHERE A.ID=B.AIREXPORT_ID
AND A.COM_ID=:GCOM_ID)
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-plane fa-anim-horizontal-shake fa-rotate-270'--, 2, 'fa-users', 'fa-users'
) AS CARD_ICON,
'AA' AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE ,
'Total Booking' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT1
UNION ALL
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-badge-list') AS CARD_ICON,
NULL AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE,
'Total HAWB' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT2
UNION ALL
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-arrows fa-anim-spin') AS CARD_ICON,
NULL AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE,
'Total MAWB' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT6
UNION ALL
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-cube') AS CARD_ICON,
NULL AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE,
'Total CBM' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT3
UNION ALL
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-balance-scale fa-anim-flash') AS CARD_ICON,
NULL AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE,
'Total cha. WEIGHT' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT4
UNION ALL
SELECT
'icon' AS CARD_TYPE,
DECODE(ROWNUM, 1, 'fa-balance-scale fa-anim-flash') AS CARD_ICON,
NULL AS CARD_ICON_COLOR,
NULL AS CARD_HEADER_STYLE,
NULL AS CARD_TITLE,
VALUE AS CARD_VALUE,
'Total Gross WEIGHT' AS CARD_FOOTER,
'#' AS CARD_LINK,
NULL AS CARD_CHART_DATA,
NULL AS CARD_CHART_CONFIG
FROM DAT5
Step: 4
=====
Inline: (for icon small and text bold)
.at-card .card-footer .stats {
color: #000 !important;
font-size: 12px !important;
}
.at-card-stats .card-header i {
font-size: 20px !important;
line-height: 1 !important;
width: auto !important;
height: 20px !important;
}
.at-card-stats .title {
margin: 0;
font-size: unset !important;
}