diff --git a/Frontend/_systemMonitor.html b/Frontend/_systemMonitor.html
new file mode 100644
index 0000000..1abd3ee
--- /dev/null
+++ b/Frontend/_systemMonitor.html
@@ -0,0 +1,265 @@
+<style>
+    [id^=yt_tooltip] {
+        width: 450px;
+    }    
+</style>
+<div class="container-fluid">
+    <div class="row bg-dark">
+        <h1 class="p-2 mx-5 mb-0">電錶系統</h1>
+        <div class="btn-group my-2">
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">總覽</button>
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">19 F</button>
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">21 F</button>
+        </div>
+
+    </div>
+</div>
+<main id="js-page-content" role="main" class="page-content">
+    <div class="row">
+        <div class="col-sm-12 col-xl-5">
+            <div class="d-flex justify-content-start mb-6">
+                <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
+                <div id="floor19" class="mr-5">
+                    <span class="status status-success d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 19F 門口東
+                </div>
+                <div class="mr-5">
+                    <span class="status status-danger d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 19F 戶外門口中間
+                </div>
+            </div>
+
+            <div class="d-flex justify-content-start mb-6">
+                <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
+                <div class=" mr-5">
+                    <span class="status status-success d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 21F 電錶01
+                </div>
+                <div class="mr-5">
+                    <span class="status status-danger d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 21F 電錶02
+                </div>
+            </div>
+
+        </div>
+        <div class="col-sm-12 col-xl-7">
+            <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
+            <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
+            <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
+        </div>
+    </div>
+
+
+
+
+
+</main>
+
+<script>
+
+    $(function () {
+        initPopover();
+    })
+
+    function drawStateTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>電壓 V</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>電流 A</td>
+                                    <td>8</td>
+                                </tr>
+                                <tr>
+                                    <td>功率 W</td>
+                                    <td>203</td>
+                                </tr>
+                                <tr>
+                                    <td>今日用電 kWh</td>
+                                    <td>58</td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawInfoTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>設備編號</td>
+                                    <td>B01-B2-19F-CR-001</td>
+                                    <td>3D 座標</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>設備名稱</td>
+                                    <td>A區迴路001</td>
+                                    <td>forge dbid</td>
+                                    <td>101</td>
+                                </tr>
+                                <tr>
+                                    <td>廠牌</td>
+                                    <td>飛利浦 Philip</td>
+                                    <td>IP</td>
+                                    <td>192.168.1.105</td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>原廠文件</td>
+                                    <td><a href="#">2022使用手冊.pdf</a></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawErrRecTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>設備編號</td>
+                                    <td>B01-B2-19F-CR-001</td>
+                                    <td>3D 座標</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>設備名稱</td>
+                                    <td>A區迴路001</td>
+                                    <td>forge dbid</td>
+                                    <td>101</td>
+                                </tr>
+                                <tr>
+                                    <td>廠牌</td>
+                                    <td>飛利浦 Philip</td>
+                                    <td>IP</td>
+                                    <td>192.168.1.105</td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>原廠文件</td>
+                                    <td><a href="#">2022使用手冊.pdf</a></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawOpeRecTabBlo() {
+        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+                            
+                        </table>`
+        return strHtml;
+    }
+
+    function initPopover() {
+        $("#floor19").YTTooltip({
+            html: `<div class="card m-1 border device-wrap">
+                                    <div class="card-header p-2 px-3">
+                                        <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                            <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                            <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                            <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                            <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body p-2 tab-content">
+
+                                        <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawStateTabBlo() }
+                                        </div>
+                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawInfoTabBlo() }
+                                        </div>
+                                        <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                           ${drawErrRecTabBlo() }
+                                        </div>
+                                        <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                           ${drawOpeRecTabBlo() }
+                                        </div>
+
+
+                                    </div>
+                                </div>`,
+            onShow: function () {
+                
+                var tab = new YT.Tab({ tabName: "cardTab" })
+
+                loadOpeRecTable();
+            }
+        })
+
+        function loadOpeRecTable() {
+            let url = "https://api.npoint.io/31e717774a0f5822cc7b";
+            let tag = "#opeRecTable";
+
+            let column_defs = [
+                { "targets": [0], "width": "8%", "sortable": true },
+                { "targets": [1], "width": "8%", "sortable": true },
+                { "targets": [2], "width": "7%", "sortable": true},
+                { "targets": [3], "width": "7%", "sortable": true},
+            ];
+
+            let columns = [
+                {
+                    "title": "異常ID",
+                    "data": "errId",
+                },
+                {
+                    "title": "異常原因",
+                    "data": "errReason",
+                },
+                {
+                    "title": "ACK確認",
+                    "data": "ackCheck",
+                },
+                {
+                    "title": "發生/賦歸時間",
+                    "data": "time",
+                },
+               
+            ];
+
+            let callback = function () {
+                $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
+                let api = this.api();
+                api.columns.adjust();
+            }
+
+            opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/Frontend/css/yourteam/plugins/yt-tooltip/yt-tooltip.css b/Frontend/css/yourteam/plugins/yt-tooltip/yt-tooltip.css
new file mode 100644
index 0000000..a9de2a9
--- /dev/null
+++ b/Frontend/css/yourteam/plugins/yt-tooltip/yt-tooltip.css
@@ -0,0 +1,8 @@
+[id^=yt_tooltip] {
+    background-color: var(--yt-main-color);
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 20%);
+    min-width:100px;
+}
+
diff --git a/Frontend/img/demo/_notes/dwsync.xml b/Frontend/img/demo/_notes/dwsync.xml
new file mode 100644
index 0000000..d3a342d
--- /dev/null
+++ b/Frontend/img/demo/_notes/dwsync.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<dwsync>
+<file name="s-1.png" server="//mnas/web/wsp/" local="132338994700000000" remote="132338994700000000" Dst="0" />
+</dwsync>
\ No newline at end of file
diff --git a/Frontend/img/demo/ajax.png b/Frontend/img/demo/ajax.png
new file mode 100644
index 0000000..8918880
Binary files /dev/null and b/Frontend/img/demo/ajax.png differ
diff --git a/Frontend/img/demo/angular.png b/Frontend/img/demo/angular.png
new file mode 100644
index 0000000..4250c8c
Binary files /dev/null and b/Frontend/img/demo/angular.png differ
diff --git a/Frontend/img/demo/authors/josh.png b/Frontend/img/demo/authors/josh.png
new file mode 100644
index 0000000..6692d3b
Binary files /dev/null and b/Frontend/img/demo/authors/josh.png differ
diff --git a/Frontend/img/demo/authors/jovanni.png b/Frontend/img/demo/authors/jovanni.png
new file mode 100644
index 0000000..1ef5642
Binary files /dev/null and b/Frontend/img/demo/authors/jovanni.png differ
diff --git a/Frontend/img/demo/authors/roberto.png b/Frontend/img/demo/authors/roberto.png
new file mode 100644
index 0000000..13e5bff
Binary files /dev/null and b/Frontend/img/demo/authors/roberto.png differ
diff --git a/Frontend/img/demo/authors/sunny.png b/Frontend/img/demo/authors/sunny.png
new file mode 100644
index 0000000..8c85449
Binary files /dev/null and b/Frontend/img/demo/authors/sunny.png differ
diff --git a/Frontend/img/demo/avatars/_notes/dwsync.xml b/Frontend/img/demo/avatars/_notes/dwsync.xml
new file mode 100644
index 0000000..854ed8a
--- /dev/null
+++ b/Frontend/img/demo/avatars/_notes/dwsync.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<dwsync>
+<file name="avatar-admin.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-d.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-b.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-e.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-g.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-h.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-a.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-j.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-c.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-m.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+</dwsync>
\ No newline at end of file
diff --git a/Frontend/img/demo/avatars/avatar-a.png b/Frontend/img/demo/avatars/avatar-a.png
new file mode 100644
index 0000000..1268fed
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-a.png differ
diff --git a/Frontend/img/demo/avatars/avatar-admin.txt b/Frontend/img/demo/avatars/avatar-admin.txt
new file mode 100644
index 0000000..fa8e9e6
--- /dev/null
+++ b/Frontend/img/demo/avatars/avatar-admin.txt
@@ -0,0 +1,35 @@
+LICENSE CERTIFICATE : Envato Market Item
+==============================================
+
+This document certifies the purchase of:
+ONE PHOTODUNE EXTENDED LICENSE
+as defined in the standard terms and conditions on Envato Market.
+
+Licensor's Author Username:
+ollyi
+
+Licensee:
+Sunnyat A.
+
+Item Title:
+Computer programmer (aka "img/demo/avatars/avatar-admin.png")
+
+Item URL:
+https://photodune.net/item/computer-programmer/2360811
+
+Item ID:
+2360811
+
+Item Purchase Code:
+c37c52b4-2d0b-4742-993e-ef2f771251ae
+
+Purchase Date:
+2014-03-06 12:23:06 UTC
+
+For any queries related to this document or license please contact Help Team via https://help.market.envato.com
+
+Envato Pty. Ltd. (ABN 11 119 159 741)
+PO Box 16122, Collins Street West, VIC 8007, Australia
+
+==== THIS IS NOT A TAX RECEIPT OR INVOICE ====
+
diff --git a/Frontend/img/demo/avatars/avatar-b.png b/Frontend/img/demo/avatars/avatar-b.png
new file mode 100644
index 0000000..ee0a010
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-b.png differ
diff --git a/Frontend/img/demo/avatars/avatar-c.png b/Frontend/img/demo/avatars/avatar-c.png
new file mode 100644
index 0000000..b5f97a5
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-c.png differ
diff --git a/Frontend/img/demo/avatars/avatar-d.png b/Frontend/img/demo/avatars/avatar-d.png
new file mode 100644
index 0000000..2bfea57
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-d.png differ
diff --git a/Frontend/img/demo/avatars/avatar-e.png b/Frontend/img/demo/avatars/avatar-e.png
new file mode 100644
index 0000000..530c699
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-e.png differ
diff --git a/Frontend/img/demo/avatars/avatar-f.png b/Frontend/img/demo/avatars/avatar-f.png
new file mode 100644
index 0000000..64804af
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-f.png differ
diff --git a/Frontend/img/demo/avatars/avatar-g.png b/Frontend/img/demo/avatars/avatar-g.png
new file mode 100644
index 0000000..87612fa
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-g.png differ
diff --git a/Frontend/img/demo/avatars/avatar-h.png b/Frontend/img/demo/avatars/avatar-h.png
new file mode 100644
index 0000000..8385187
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-h.png differ
diff --git a/Frontend/img/demo/avatars/avatar-i.png b/Frontend/img/demo/avatars/avatar-i.png
new file mode 100644
index 0000000..c478315
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-i.png differ
diff --git a/Frontend/img/demo/avatars/avatar-j.png b/Frontend/img/demo/avatars/avatar-j.png
new file mode 100644
index 0000000..9a5b112
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-j.png differ
diff --git a/Frontend/img/demo/avatars/avatar-k.png b/Frontend/img/demo/avatars/avatar-k.png
new file mode 100644
index 0000000..475df3d
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-k.png differ
diff --git a/Frontend/img/demo/avatars/avatar-m.png b/Frontend/img/demo/avatars/avatar-m.png
new file mode 100644
index 0000000..85dda36
Binary files /dev/null and b/Frontend/img/demo/avatars/avatar-m.png differ
diff --git a/Frontend/img/demo/avatars/cc.txt b/Frontend/img/demo/avatars/cc.txt
new file mode 100644
index 0000000..871970b
--- /dev/null
+++ b/Frontend/img/demo/avatars/cc.txt
@@ -0,0 +1,10 @@
+CC0 License
+
+- Free for personal and commercial use
+- No attribution required
+
+https://www.pexels.com
+https://www.pexels.com/photo-license/
+
+Search case:
+https://www.pexels.com/search/profile/
\ No newline at end of file
diff --git a/Frontend/img/demo/avatars/ng.jpg b/Frontend/img/demo/avatars/ng.jpg
new file mode 100644
index 0000000..84872ea
Binary files /dev/null and b/Frontend/img/demo/avatars/ng.jpg differ
diff --git a/Frontend/img/demo/chromedevtools-1.png b/Frontend/img/demo/chromedevtools-1.png
new file mode 100644
index 0000000..82c2516
Binary files /dev/null and b/Frontend/img/demo/chromedevtools-1.png differ
diff --git a/Frontend/img/demo/chromedevtools-2.png b/Frontend/img/demo/chromedevtools-2.png
new file mode 100644
index 0000000..703bc15
Binary files /dev/null and b/Frontend/img/demo/chromedevtools-2.png differ
diff --git a/Frontend/img/demo/chromedevtools-3.png b/Frontend/img/demo/chromedevtools-3.png
new file mode 100644
index 0000000..9bf028f
Binary files /dev/null and b/Frontend/img/demo/chromedevtools-3.png differ
diff --git a/Frontend/img/demo/chromedevtools-4.png b/Frontend/img/demo/chromedevtools-4.png
new file mode 100644
index 0000000..134056d
Binary files /dev/null and b/Frontend/img/demo/chromedevtools-4.png differ
diff --git a/Frontend/img/demo/debounce-at_begin.png b/Frontend/img/demo/debounce-at_begin.png
new file mode 100644
index 0000000..960ed97
Binary files /dev/null and b/Frontend/img/demo/debounce-at_begin.png differ
diff --git a/Frontend/img/demo/debounce.png b/Frontend/img/demo/debounce.png
new file mode 100644
index 0000000..7a2a3c2
Binary files /dev/null and b/Frontend/img/demo/debounce.png differ
diff --git a/Frontend/img/demo/demo-panel.png b/Frontend/img/demo/demo-panel.png
new file mode 100644
index 0000000..e337f3c
Binary files /dev/null and b/Frontend/img/demo/demo-panel.png differ
diff --git a/Frontend/img/demo/gallery/1.jpg b/Frontend/img/demo/gallery/1.jpg
new file mode 100644
index 0000000..add0a28
Binary files /dev/null and b/Frontend/img/demo/gallery/1.jpg differ
diff --git a/Frontend/img/demo/gallery/10.jpg b/Frontend/img/demo/gallery/10.jpg
new file mode 100644
index 0000000..06b9e08
Binary files /dev/null and b/Frontend/img/demo/gallery/10.jpg differ
diff --git a/Frontend/img/demo/gallery/11.jpg b/Frontend/img/demo/gallery/11.jpg
new file mode 100644
index 0000000..69711c9
Binary files /dev/null and b/Frontend/img/demo/gallery/11.jpg differ
diff --git a/Frontend/img/demo/gallery/12.jpg b/Frontend/img/demo/gallery/12.jpg
new file mode 100644
index 0000000..d9fff7e
Binary files /dev/null and b/Frontend/img/demo/gallery/12.jpg differ
diff --git a/Frontend/img/demo/gallery/13.jpg b/Frontend/img/demo/gallery/13.jpg
new file mode 100644
index 0000000..7e5a75c
Binary files /dev/null and b/Frontend/img/demo/gallery/13.jpg differ
diff --git a/Frontend/img/demo/gallery/14.jpg b/Frontend/img/demo/gallery/14.jpg
new file mode 100644
index 0000000..79fc1f9
Binary files /dev/null and b/Frontend/img/demo/gallery/14.jpg differ
diff --git a/Frontend/img/demo/gallery/15.jpg b/Frontend/img/demo/gallery/15.jpg
new file mode 100644
index 0000000..33d311d
Binary files /dev/null and b/Frontend/img/demo/gallery/15.jpg differ
diff --git a/Frontend/img/demo/gallery/16.jpg b/Frontend/img/demo/gallery/16.jpg
new file mode 100644
index 0000000..8aae2ec
Binary files /dev/null and b/Frontend/img/demo/gallery/16.jpg differ
diff --git a/Frontend/img/demo/gallery/17.jpg b/Frontend/img/demo/gallery/17.jpg
new file mode 100644
index 0000000..a38dda5
Binary files /dev/null and b/Frontend/img/demo/gallery/17.jpg differ
diff --git a/Frontend/img/demo/gallery/18.jpg b/Frontend/img/demo/gallery/18.jpg
new file mode 100644
index 0000000..fee9a11
Binary files /dev/null and b/Frontend/img/demo/gallery/18.jpg differ
diff --git a/Frontend/img/demo/gallery/19.jpg b/Frontend/img/demo/gallery/19.jpg
new file mode 100644
index 0000000..40bb8e4
Binary files /dev/null and b/Frontend/img/demo/gallery/19.jpg differ
diff --git a/Frontend/img/demo/gallery/2.jpg b/Frontend/img/demo/gallery/2.jpg
new file mode 100644
index 0000000..381f244
Binary files /dev/null and b/Frontend/img/demo/gallery/2.jpg differ
diff --git a/Frontend/img/demo/gallery/20.jpg b/Frontend/img/demo/gallery/20.jpg
new file mode 100644
index 0000000..3032e76
Binary files /dev/null and b/Frontend/img/demo/gallery/20.jpg differ
diff --git a/Frontend/img/demo/gallery/21.jpg b/Frontend/img/demo/gallery/21.jpg
new file mode 100644
index 0000000..21cc518
Binary files /dev/null and b/Frontend/img/demo/gallery/21.jpg differ
diff --git a/Frontend/img/demo/gallery/22.jpg b/Frontend/img/demo/gallery/22.jpg
new file mode 100644
index 0000000..6b5b4c6
Binary files /dev/null and b/Frontend/img/demo/gallery/22.jpg differ
diff --git a/Frontend/img/demo/gallery/23.jpg b/Frontend/img/demo/gallery/23.jpg
new file mode 100644
index 0000000..f459b98
Binary files /dev/null and b/Frontend/img/demo/gallery/23.jpg differ
diff --git a/Frontend/img/demo/gallery/24.jpg b/Frontend/img/demo/gallery/24.jpg
new file mode 100644
index 0000000..b811678
Binary files /dev/null and b/Frontend/img/demo/gallery/24.jpg differ
diff --git a/Frontend/img/demo/gallery/25.jpg b/Frontend/img/demo/gallery/25.jpg
new file mode 100644
index 0000000..95041c3
Binary files /dev/null and b/Frontend/img/demo/gallery/25.jpg differ
diff --git a/Frontend/img/demo/gallery/26.jpg b/Frontend/img/demo/gallery/26.jpg
new file mode 100644
index 0000000..84b708f
Binary files /dev/null and b/Frontend/img/demo/gallery/26.jpg differ
diff --git a/Frontend/img/demo/gallery/27.jpg b/Frontend/img/demo/gallery/27.jpg
new file mode 100644
index 0000000..9b27caf
Binary files /dev/null and b/Frontend/img/demo/gallery/27.jpg differ
diff --git a/Frontend/img/demo/gallery/28.jpg b/Frontend/img/demo/gallery/28.jpg
new file mode 100644
index 0000000..7c381b2
Binary files /dev/null and b/Frontend/img/demo/gallery/28.jpg differ
diff --git a/Frontend/img/demo/gallery/29.jpg b/Frontend/img/demo/gallery/29.jpg
new file mode 100644
index 0000000..7dd3c61
Binary files /dev/null and b/Frontend/img/demo/gallery/29.jpg differ
diff --git a/Frontend/img/demo/gallery/3.jpg b/Frontend/img/demo/gallery/3.jpg
new file mode 100644
index 0000000..a3840da
Binary files /dev/null and b/Frontend/img/demo/gallery/3.jpg differ
diff --git a/Frontend/img/demo/gallery/30.jpg b/Frontend/img/demo/gallery/30.jpg
new file mode 100644
index 0000000..7616434
Binary files /dev/null and b/Frontend/img/demo/gallery/30.jpg differ
diff --git a/Frontend/img/demo/gallery/31.jpg b/Frontend/img/demo/gallery/31.jpg
new file mode 100644
index 0000000..4721797
Binary files /dev/null and b/Frontend/img/demo/gallery/31.jpg differ
diff --git a/Frontend/img/demo/gallery/32.jpg b/Frontend/img/demo/gallery/32.jpg
new file mode 100644
index 0000000..8e46046
Binary files /dev/null and b/Frontend/img/demo/gallery/32.jpg differ
diff --git a/Frontend/img/demo/gallery/33.jpg b/Frontend/img/demo/gallery/33.jpg
new file mode 100644
index 0000000..292b51f
Binary files /dev/null and b/Frontend/img/demo/gallery/33.jpg differ
diff --git a/Frontend/img/demo/gallery/34.jpg b/Frontend/img/demo/gallery/34.jpg
new file mode 100644
index 0000000..64510e2
Binary files /dev/null and b/Frontend/img/demo/gallery/34.jpg differ
diff --git a/Frontend/img/demo/gallery/35.jpg b/Frontend/img/demo/gallery/35.jpg
new file mode 100644
index 0000000..f104da4
Binary files /dev/null and b/Frontend/img/demo/gallery/35.jpg differ
diff --git a/Frontend/img/demo/gallery/36.jpg b/Frontend/img/demo/gallery/36.jpg
new file mode 100644
index 0000000..27d4056
Binary files /dev/null and b/Frontend/img/demo/gallery/36.jpg differ
diff --git a/Frontend/img/demo/gallery/37.jpg b/Frontend/img/demo/gallery/37.jpg
new file mode 100644
index 0000000..4f3a8f7
Binary files /dev/null and b/Frontend/img/demo/gallery/37.jpg differ
diff --git a/Frontend/img/demo/gallery/38.jpg b/Frontend/img/demo/gallery/38.jpg
new file mode 100644
index 0000000..2159421
Binary files /dev/null and b/Frontend/img/demo/gallery/38.jpg differ
diff --git a/Frontend/img/demo/gallery/39.jpg b/Frontend/img/demo/gallery/39.jpg
new file mode 100644
index 0000000..521f27a
Binary files /dev/null and b/Frontend/img/demo/gallery/39.jpg differ
diff --git a/Frontend/img/demo/gallery/4.jpg b/Frontend/img/demo/gallery/4.jpg
new file mode 100644
index 0000000..13f0f3f
Binary files /dev/null and b/Frontend/img/demo/gallery/4.jpg differ
diff --git a/Frontend/img/demo/gallery/40.jpg b/Frontend/img/demo/gallery/40.jpg
new file mode 100644
index 0000000..5e75a06
Binary files /dev/null and b/Frontend/img/demo/gallery/40.jpg differ
diff --git a/Frontend/img/demo/gallery/41.jpg b/Frontend/img/demo/gallery/41.jpg
new file mode 100644
index 0000000..b9b5741
Binary files /dev/null and b/Frontend/img/demo/gallery/41.jpg differ
diff --git a/Frontend/img/demo/gallery/42.jpg b/Frontend/img/demo/gallery/42.jpg
new file mode 100644
index 0000000..2043bb1
Binary files /dev/null and b/Frontend/img/demo/gallery/42.jpg differ
diff --git a/Frontend/img/demo/gallery/43.jpg b/Frontend/img/demo/gallery/43.jpg
new file mode 100644
index 0000000..733e2fd
Binary files /dev/null and b/Frontend/img/demo/gallery/43.jpg differ
diff --git a/Frontend/img/demo/gallery/44.jpg b/Frontend/img/demo/gallery/44.jpg
new file mode 100644
index 0000000..5712eab
Binary files /dev/null and b/Frontend/img/demo/gallery/44.jpg differ
diff --git a/Frontend/img/demo/gallery/45.jpg b/Frontend/img/demo/gallery/45.jpg
new file mode 100644
index 0000000..a947075
Binary files /dev/null and b/Frontend/img/demo/gallery/45.jpg differ
diff --git a/Frontend/img/demo/gallery/46.jpg b/Frontend/img/demo/gallery/46.jpg
new file mode 100644
index 0000000..e3fb1e0
Binary files /dev/null and b/Frontend/img/demo/gallery/46.jpg differ
diff --git a/Frontend/img/demo/gallery/47.jpg b/Frontend/img/demo/gallery/47.jpg
new file mode 100644
index 0000000..531ed64
Binary files /dev/null and b/Frontend/img/demo/gallery/47.jpg differ
diff --git a/Frontend/img/demo/gallery/48.jpg b/Frontend/img/demo/gallery/48.jpg
new file mode 100644
index 0000000..da4885a
Binary files /dev/null and b/Frontend/img/demo/gallery/48.jpg differ
diff --git a/Frontend/img/demo/gallery/49.jpg b/Frontend/img/demo/gallery/49.jpg
new file mode 100644
index 0000000..131a612
Binary files /dev/null and b/Frontend/img/demo/gallery/49.jpg differ
diff --git a/Frontend/img/demo/gallery/5.jpg b/Frontend/img/demo/gallery/5.jpg
new file mode 100644
index 0000000..c12cea2
Binary files /dev/null and b/Frontend/img/demo/gallery/5.jpg differ
diff --git a/Frontend/img/demo/gallery/50.jpg b/Frontend/img/demo/gallery/50.jpg
new file mode 100644
index 0000000..ba40f9f
Binary files /dev/null and b/Frontend/img/demo/gallery/50.jpg differ
diff --git a/Frontend/img/demo/gallery/51.jpg b/Frontend/img/demo/gallery/51.jpg
new file mode 100644
index 0000000..9078c70
Binary files /dev/null and b/Frontend/img/demo/gallery/51.jpg differ
diff --git a/Frontend/img/demo/gallery/52.jpg b/Frontend/img/demo/gallery/52.jpg
new file mode 100644
index 0000000..a6a1ce5
Binary files /dev/null and b/Frontend/img/demo/gallery/52.jpg differ
diff --git a/Frontend/img/demo/gallery/53.jpg b/Frontend/img/demo/gallery/53.jpg
new file mode 100644
index 0000000..2bb0419
Binary files /dev/null and b/Frontend/img/demo/gallery/53.jpg differ
diff --git a/Frontend/img/demo/gallery/54.jpg b/Frontend/img/demo/gallery/54.jpg
new file mode 100644
index 0000000..ce6354f
Binary files /dev/null and b/Frontend/img/demo/gallery/54.jpg differ
diff --git a/Frontend/img/demo/gallery/55.jpg b/Frontend/img/demo/gallery/55.jpg
new file mode 100644
index 0000000..4b071cb
Binary files /dev/null and b/Frontend/img/demo/gallery/55.jpg differ
diff --git a/Frontend/img/demo/gallery/56.jpg b/Frontend/img/demo/gallery/56.jpg
new file mode 100644
index 0000000..a5896de
Binary files /dev/null and b/Frontend/img/demo/gallery/56.jpg differ
diff --git a/Frontend/img/demo/gallery/57.jpg b/Frontend/img/demo/gallery/57.jpg
new file mode 100644
index 0000000..ac32224
Binary files /dev/null and b/Frontend/img/demo/gallery/57.jpg differ
diff --git a/Frontend/img/demo/gallery/58.jpg b/Frontend/img/demo/gallery/58.jpg
new file mode 100644
index 0000000..64f8424
Binary files /dev/null and b/Frontend/img/demo/gallery/58.jpg differ
diff --git a/Frontend/img/demo/gallery/59.jpg b/Frontend/img/demo/gallery/59.jpg
new file mode 100644
index 0000000..b986636
Binary files /dev/null and b/Frontend/img/demo/gallery/59.jpg differ
diff --git a/Frontend/img/demo/gallery/6.jpg b/Frontend/img/demo/gallery/6.jpg
new file mode 100644
index 0000000..e235628
Binary files /dev/null and b/Frontend/img/demo/gallery/6.jpg differ
diff --git a/Frontend/img/demo/gallery/7.jpg b/Frontend/img/demo/gallery/7.jpg
new file mode 100644
index 0000000..a360016
Binary files /dev/null and b/Frontend/img/demo/gallery/7.jpg differ
diff --git a/Frontend/img/demo/gallery/8.jpg b/Frontend/img/demo/gallery/8.jpg
new file mode 100644
index 0000000..6429cb1
Binary files /dev/null and b/Frontend/img/demo/gallery/8.jpg differ
diff --git a/Frontend/img/demo/gallery/9.jpg b/Frontend/img/demo/gallery/9.jpg
new file mode 100644
index 0000000..dc91860
Binary files /dev/null and b/Frontend/img/demo/gallery/9.jpg differ
diff --git a/Frontend/img/demo/gallery/source.txt b/Frontend/img/demo/gallery/source.txt
new file mode 100644
index 0000000..871b28b
--- /dev/null
+++ b/Frontend/img/demo/gallery/source.txt
@@ -0,0 +1,7 @@
+License
+All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
+
+More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.
+
+
+https://unsplash.com/license
diff --git a/Frontend/img/demo/gallery/thumb/1.jpg b/Frontend/img/demo/gallery/thumb/1.jpg
new file mode 100644
index 0000000..47dfcaa
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/1.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/10.jpg b/Frontend/img/demo/gallery/thumb/10.jpg
new file mode 100644
index 0000000..28b4a54
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/10.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/11.jpg b/Frontend/img/demo/gallery/thumb/11.jpg
new file mode 100644
index 0000000..3cc0ec7
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/11.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/12.jpg b/Frontend/img/demo/gallery/thumb/12.jpg
new file mode 100644
index 0000000..c3f33ac
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/12.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/13.jpg b/Frontend/img/demo/gallery/thumb/13.jpg
new file mode 100644
index 0000000..d5d895d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/13.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/14.jpg b/Frontend/img/demo/gallery/thumb/14.jpg
new file mode 100644
index 0000000..8379a85
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/14.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/15.jpg b/Frontend/img/demo/gallery/thumb/15.jpg
new file mode 100644
index 0000000..a0002a0
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/15.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/16.jpg b/Frontend/img/demo/gallery/thumb/16.jpg
new file mode 100644
index 0000000..aa67ac5
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/16.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/17.jpg b/Frontend/img/demo/gallery/thumb/17.jpg
new file mode 100644
index 0000000..cf15862
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/17.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/18.jpg b/Frontend/img/demo/gallery/thumb/18.jpg
new file mode 100644
index 0000000..a00a32e
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/18.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/19.jpg b/Frontend/img/demo/gallery/thumb/19.jpg
new file mode 100644
index 0000000..1c6aaca
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/19.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/2.jpg b/Frontend/img/demo/gallery/thumb/2.jpg
new file mode 100644
index 0000000..a8e016e
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/2.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/20.jpg b/Frontend/img/demo/gallery/thumb/20.jpg
new file mode 100644
index 0000000..ed3e7c4
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/20.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/21.jpg b/Frontend/img/demo/gallery/thumb/21.jpg
new file mode 100644
index 0000000..6e88590
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/21.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/22.jpg b/Frontend/img/demo/gallery/thumb/22.jpg
new file mode 100644
index 0000000..325a3f9
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/22.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/23.jpg b/Frontend/img/demo/gallery/thumb/23.jpg
new file mode 100644
index 0000000..034c76f
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/23.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/24.jpg b/Frontend/img/demo/gallery/thumb/24.jpg
new file mode 100644
index 0000000..836a318
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/24.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/25.jpg b/Frontend/img/demo/gallery/thumb/25.jpg
new file mode 100644
index 0000000..af6ddad
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/25.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/26.jpg b/Frontend/img/demo/gallery/thumb/26.jpg
new file mode 100644
index 0000000..818247a
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/26.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/27.jpg b/Frontend/img/demo/gallery/thumb/27.jpg
new file mode 100644
index 0000000..2555104
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/27.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/28.jpg b/Frontend/img/demo/gallery/thumb/28.jpg
new file mode 100644
index 0000000..916121d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/28.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/29.jpg b/Frontend/img/demo/gallery/thumb/29.jpg
new file mode 100644
index 0000000..5dd157e
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/29.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/3.jpg b/Frontend/img/demo/gallery/thumb/3.jpg
new file mode 100644
index 0000000..24afc1e
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/3.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/30.jpg b/Frontend/img/demo/gallery/thumb/30.jpg
new file mode 100644
index 0000000..a183f9d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/30.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/31.jpg b/Frontend/img/demo/gallery/thumb/31.jpg
new file mode 100644
index 0000000..5e5c66c
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/31.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/32.jpg b/Frontend/img/demo/gallery/thumb/32.jpg
new file mode 100644
index 0000000..c1badbe
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/32.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/33.jpg b/Frontend/img/demo/gallery/thumb/33.jpg
new file mode 100644
index 0000000..7aa8fe3
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/33.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/34.jpg b/Frontend/img/demo/gallery/thumb/34.jpg
new file mode 100644
index 0000000..f881384
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/34.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/35.jpg b/Frontend/img/demo/gallery/thumb/35.jpg
new file mode 100644
index 0000000..ab12c10
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/35.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/36.jpg b/Frontend/img/demo/gallery/thumb/36.jpg
new file mode 100644
index 0000000..e282915
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/36.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/37.jpg b/Frontend/img/demo/gallery/thumb/37.jpg
new file mode 100644
index 0000000..c85f31f
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/37.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/38.jpg b/Frontend/img/demo/gallery/thumb/38.jpg
new file mode 100644
index 0000000..927390c
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/38.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/39.jpg b/Frontend/img/demo/gallery/thumb/39.jpg
new file mode 100644
index 0000000..e403828
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/39.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/4.jpg b/Frontend/img/demo/gallery/thumb/4.jpg
new file mode 100644
index 0000000..46b1f29
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/4.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/40.jpg b/Frontend/img/demo/gallery/thumb/40.jpg
new file mode 100644
index 0000000..5ea4597
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/40.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/41.jpg b/Frontend/img/demo/gallery/thumb/41.jpg
new file mode 100644
index 0000000..8d49992
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/41.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/42.jpg b/Frontend/img/demo/gallery/thumb/42.jpg
new file mode 100644
index 0000000..a809dc6
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/42.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/43.jpg b/Frontend/img/demo/gallery/thumb/43.jpg
new file mode 100644
index 0000000..658c2bd
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/43.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/44.jpg b/Frontend/img/demo/gallery/thumb/44.jpg
new file mode 100644
index 0000000..1e12ef0
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/44.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/45.jpg b/Frontend/img/demo/gallery/thumb/45.jpg
new file mode 100644
index 0000000..03989e7
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/45.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/46.jpg b/Frontend/img/demo/gallery/thumb/46.jpg
new file mode 100644
index 0000000..890da62
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/46.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/47.jpg b/Frontend/img/demo/gallery/thumb/47.jpg
new file mode 100644
index 0000000..d127087
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/47.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/48.jpg b/Frontend/img/demo/gallery/thumb/48.jpg
new file mode 100644
index 0000000..1cf5dab
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/48.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/49.jpg b/Frontend/img/demo/gallery/thumb/49.jpg
new file mode 100644
index 0000000..83d02b1
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/49.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/5.jpg b/Frontend/img/demo/gallery/thumb/5.jpg
new file mode 100644
index 0000000..e9a472e
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/5.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/50.jpg b/Frontend/img/demo/gallery/thumb/50.jpg
new file mode 100644
index 0000000..6206080
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/50.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/51.jpg b/Frontend/img/demo/gallery/thumb/51.jpg
new file mode 100644
index 0000000..33eca90
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/51.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/52.jpg b/Frontend/img/demo/gallery/thumb/52.jpg
new file mode 100644
index 0000000..4967557
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/52.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/53.jpg b/Frontend/img/demo/gallery/thumb/53.jpg
new file mode 100644
index 0000000..734db79
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/53.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/54.jpg b/Frontend/img/demo/gallery/thumb/54.jpg
new file mode 100644
index 0000000..59f925d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/54.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/55.jpg b/Frontend/img/demo/gallery/thumb/55.jpg
new file mode 100644
index 0000000..288b961
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/55.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/56.jpg b/Frontend/img/demo/gallery/thumb/56.jpg
new file mode 100644
index 0000000..d61ce30
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/56.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/57.jpg b/Frontend/img/demo/gallery/thumb/57.jpg
new file mode 100644
index 0000000..0a4cab2
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/57.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/58.jpg b/Frontend/img/demo/gallery/thumb/58.jpg
new file mode 100644
index 0000000..bfc702c
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/58.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/59.jpg b/Frontend/img/demo/gallery/thumb/59.jpg
new file mode 100644
index 0000000..f937415
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/59.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/6.jpg b/Frontend/img/demo/gallery/thumb/6.jpg
new file mode 100644
index 0000000..7bd781d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/6.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/7.jpg b/Frontend/img/demo/gallery/thumb/7.jpg
new file mode 100644
index 0000000..dca1a7d
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/7.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/8.jpg b/Frontend/img/demo/gallery/thumb/8.jpg
new file mode 100644
index 0000000..0be2fff
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/8.jpg differ
diff --git a/Frontend/img/demo/gallery/thumb/9.jpg b/Frontend/img/demo/gallery/thumb/9.jpg
new file mode 100644
index 0000000..19bc789
Binary files /dev/null and b/Frontend/img/demo/gallery/thumb/9.jpg differ
diff --git a/Frontend/img/demo/grid-options.png b/Frontend/img/demo/grid-options.png
new file mode 100644
index 0000000..dd04bfc
Binary files /dev/null and b/Frontend/img/demo/grid-options.png differ
diff --git a/Frontend/img/demo/html5.png b/Frontend/img/demo/html5.png
new file mode 100644
index 0000000..358213f
Binary files /dev/null and b/Frontend/img/demo/html5.png differ
diff --git a/Frontend/img/demo/laravel.png b/Frontend/img/demo/laravel.png
new file mode 100644
index 0000000..186d47d
Binary files /dev/null and b/Frontend/img/demo/laravel.png differ
diff --git a/Frontend/img/demo/modes/mode-dark-lg.png b/Frontend/img/demo/modes/mode-dark-lg.png
new file mode 100644
index 0000000..dd9b3a3
Binary files /dev/null and b/Frontend/img/demo/modes/mode-dark-lg.png differ
diff --git a/Frontend/img/demo/modes/mode-dark.png b/Frontend/img/demo/modes/mode-dark.png
new file mode 100644
index 0000000..bbf4a05
Binary files /dev/null and b/Frontend/img/demo/modes/mode-dark.png differ
diff --git a/Frontend/img/demo/modes/mode-default-lg.png b/Frontend/img/demo/modes/mode-default-lg.png
new file mode 100644
index 0000000..26628d6
Binary files /dev/null and b/Frontend/img/demo/modes/mode-default-lg.png differ
diff --git a/Frontend/img/demo/modes/mode-glass-lg.png b/Frontend/img/demo/modes/mode-glass-lg.png
new file mode 100644
index 0000000..4314cea
Binary files /dev/null and b/Frontend/img/demo/modes/mode-glass-lg.png differ
diff --git a/Frontend/img/demo/modes/mode-light-lg.png b/Frontend/img/demo/modes/mode-light-lg.png
new file mode 100644
index 0000000..5cd3413
Binary files /dev/null and b/Frontend/img/demo/modes/mode-light-lg.png differ
diff --git a/Frontend/img/demo/modes/mode-light.png b/Frontend/img/demo/modes/mode-light.png
new file mode 100644
index 0000000..734b040
Binary files /dev/null and b/Frontend/img/demo/modes/mode-light.png differ
diff --git a/Frontend/img/demo/mvc.png b/Frontend/img/demo/mvc.png
new file mode 100644
index 0000000..11ce715
Binary files /dev/null and b/Frontend/img/demo/mvc.png differ
diff --git a/Frontend/img/demo/peace-full.jpg b/Frontend/img/demo/peace-full.jpg
new file mode 100644
index 0000000..70bafd6
Binary files /dev/null and b/Frontend/img/demo/peace-full.jpg differ
diff --git a/Frontend/img/demo/php.png b/Frontend/img/demo/php.png
new file mode 100644
index 0000000..9dab717
Binary files /dev/null and b/Frontend/img/demo/php.png differ
diff --git a/Frontend/img/demo/position-absolute.gif b/Frontend/img/demo/position-absolute.gif
new file mode 100644
index 0000000..b04cb33
Binary files /dev/null and b/Frontend/img/demo/position-absolute.gif differ
diff --git a/Frontend/img/demo/position-fixed.gif b/Frontend/img/demo/position-fixed.gif
new file mode 100644
index 0000000..a468bb6
Binary files /dev/null and b/Frontend/img/demo/position-fixed.gif differ
diff --git a/Frontend/img/demo/position-sticky.gif b/Frontend/img/demo/position-sticky.gif
new file mode 100644
index 0000000..1516afd
Binary files /dev/null and b/Frontend/img/demo/position-sticky.gif differ
diff --git a/Frontend/img/demo/profile/article-healthyfood.png b/Frontend/img/demo/profile/article-healthyfood.png
new file mode 100644
index 0000000..7cd8664
Binary files /dev/null and b/Frontend/img/demo/profile/article-healthyfood.png differ
diff --git a/Frontend/img/demo/profile/cc.txt b/Frontend/img/demo/profile/cc.txt
new file mode 100644
index 0000000..4fc7ec5
--- /dev/null
+++ b/Frontend/img/demo/profile/cc.txt
@@ -0,0 +1,4 @@
+Free to use license
+
+https://unsplash.com/photos/bULD0lNVXOA
+https://unsplash.com/license
\ No newline at end of file
diff --git a/Frontend/img/demo/rails.png b/Frontend/img/demo/rails.png
new file mode 100644
index 0000000..2a9a8c7
Binary files /dev/null and b/Frontend/img/demo/rails.png differ
diff --git a/Frontend/img/demo/react.png b/Frontend/img/demo/react.png
new file mode 100644
index 0000000..f371dba
Binary files /dev/null and b/Frontend/img/demo/react.png differ
diff --git a/Frontend/img/demo/relax-full.jpg b/Frontend/img/demo/relax-full.jpg
new file mode 100644
index 0000000..14a872a
Binary files /dev/null and b/Frontend/img/demo/relax-full.jpg differ
diff --git a/Frontend/img/demo/s-1.png b/Frontend/img/demo/s-1.png
new file mode 100644
index 0000000..a8d4d5d
Binary files /dev/null and b/Frontend/img/demo/s-1.png differ
diff --git a/Frontend/img/demo/sea-full.jpg b/Frontend/img/demo/sea-full.jpg
new file mode 100644
index 0000000..ae0af9a
Binary files /dev/null and b/Frontend/img/demo/sea-full.jpg differ
diff --git a/Frontend/img/demo/search/1.png b/Frontend/img/demo/search/1.png
new file mode 100644
index 0000000..23393f0
Binary files /dev/null and b/Frontend/img/demo/search/1.png differ
diff --git a/Frontend/img/demo/search/10.png b/Frontend/img/demo/search/10.png
new file mode 100644
index 0000000..cec6cea
Binary files /dev/null and b/Frontend/img/demo/search/10.png differ
diff --git a/Frontend/img/demo/search/11.png b/Frontend/img/demo/search/11.png
new file mode 100644
index 0000000..ab7400d
Binary files /dev/null and b/Frontend/img/demo/search/11.png differ
diff --git a/Frontend/img/demo/search/12.png b/Frontend/img/demo/search/12.png
new file mode 100644
index 0000000..ff39253
Binary files /dev/null and b/Frontend/img/demo/search/12.png differ
diff --git a/Frontend/img/demo/search/13.png b/Frontend/img/demo/search/13.png
new file mode 100644
index 0000000..8a5daf1
Binary files /dev/null and b/Frontend/img/demo/search/13.png differ
diff --git a/Frontend/img/demo/search/14.png b/Frontend/img/demo/search/14.png
new file mode 100644
index 0000000..70503be
Binary files /dev/null and b/Frontend/img/demo/search/14.png differ
diff --git a/Frontend/img/demo/search/15.png b/Frontend/img/demo/search/15.png
new file mode 100644
index 0000000..c6f8c46
Binary files /dev/null and b/Frontend/img/demo/search/15.png differ
diff --git a/Frontend/img/demo/search/2.png b/Frontend/img/demo/search/2.png
new file mode 100644
index 0000000..e5d8abc
Binary files /dev/null and b/Frontend/img/demo/search/2.png differ
diff --git a/Frontend/img/demo/search/3.png b/Frontend/img/demo/search/3.png
new file mode 100644
index 0000000..e791beb
Binary files /dev/null and b/Frontend/img/demo/search/3.png differ
diff --git a/Frontend/img/demo/search/4.png b/Frontend/img/demo/search/4.png
new file mode 100644
index 0000000..870e54f
Binary files /dev/null and b/Frontend/img/demo/search/4.png differ
diff --git a/Frontend/img/demo/search/5.png b/Frontend/img/demo/search/5.png
new file mode 100644
index 0000000..5ac1adc
Binary files /dev/null and b/Frontend/img/demo/search/5.png differ
diff --git a/Frontend/img/demo/search/6.png b/Frontend/img/demo/search/6.png
new file mode 100644
index 0000000..fa7ccbc
Binary files /dev/null and b/Frontend/img/demo/search/6.png differ
diff --git a/Frontend/img/demo/side-panel-demo.gif b/Frontend/img/demo/side-panel-demo.gif
new file mode 100644
index 0000000..6b0d84f
Binary files /dev/null and b/Frontend/img/demo/side-panel-demo.gif differ
diff --git a/Frontend/img/demo/skins/black.png b/Frontend/img/demo/skins/black.png
new file mode 100644
index 0000000..dc88a65
Binary files /dev/null and b/Frontend/img/demo/skins/black.png differ
diff --git a/Frontend/img/demo/skins/blue.png b/Frontend/img/demo/skins/blue.png
new file mode 100644
index 0000000..fa4bfb4
Binary files /dev/null and b/Frontend/img/demo/skins/blue.png differ
diff --git a/Frontend/img/demo/skins/green.png b/Frontend/img/demo/skins/green.png
new file mode 100644
index 0000000..8f72376
Binary files /dev/null and b/Frontend/img/demo/skins/green.png differ
diff --git a/Frontend/img/demo/skins/pink.png b/Frontend/img/demo/skins/pink.png
new file mode 100644
index 0000000..176e41f
Binary files /dev/null and b/Frontend/img/demo/skins/pink.png differ
diff --git a/Frontend/img/demo/throttle-no_trailing.png b/Frontend/img/demo/throttle-no_trailing.png
new file mode 100644
index 0000000..95076c1
Binary files /dev/null and b/Frontend/img/demo/throttle-no_trailing.png differ
diff --git a/Frontend/img/demo/throttle.png b/Frontend/img/demo/throttle.png
new file mode 100644
index 0000000..5aa54ba
Binary files /dev/null and b/Frontend/img/demo/throttle.png differ
diff --git a/Frontend/img/demo/vuejs.png b/Frontend/img/demo/vuejs.png
new file mode 100644
index 0000000..55e33d8
Binary files /dev/null and b/Frontend/img/demo/vuejs.png differ
diff --git a/Frontend/index.html b/Frontend/index.html
index 4b52e66..910d432 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -29,7 +29,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
     <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <!-- Font Awesome -->
+    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
     <link rel="stylesheet" media="screen, print" href="lib/datagrid/datatables/datatables.bundle.css">
+    <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
 </head>
 <!-- BEGIN Body -->
 <!-- Possible Classes
@@ -59,67 +62,59 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 <body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
     <!-- DOC: script to save and load page settings -->
     <script>
-            /**
-             *	This script should be placed right after the body tag for fast execution
-             *	Note: the script is written in pure javascript and does not depend on thirdparty library
-             **/
-            'use strict';
+        /**
+         *	This script should be placed right after the body tag for fast execution
+         *	Note: the script is written in pure javascript and does not depend on thirdparty library
+         **/
+        'use strict';
 
-            var classHolder = document.getElementsByTagName("BODY")[0],
-                /**
-                 * Load from localstorage
-                 **/
-                themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
+        var classHolder = document.getElementsByTagName("BODY")[0],
+            /**
+             * Load from localstorage
+             **/
+            themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
                 {},
-                themeURL = themeSettings.themeURL || '',
-                themeOptions = themeSettings.themeOptions || '';
-            /**
-             * Load theme options
-             **/
-            if (themeSettings.themeOptions)
-            {
-                classHolder.className = themeSettings.themeOptions;
-                console.log("%c✔ Theme settings loaded", "color: #148f32");
-            }
-            else
-            {
-                console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
-            }
-            if (themeSettings.themeURL && !document.getElementById('mytheme'))
-            {
-                var cssfile = document.createElement('link');
-                cssfile.id = 'mytheme';
-                cssfile.rel = 'stylesheet';
-                cssfile.href = themeURL;
-                document.getElementsByTagName('head')[0].appendChild(cssfile);
+            themeURL = themeSettings.themeURL || '',
+            themeOptions = themeSettings.themeOptions || '';
+        /**
+         * Load theme options
+         **/
+        if (themeSettings.themeOptions) {
+            classHolder.className = themeSettings.themeOptions;
+            console.log("%c✔ Theme settings loaded", "color: #148f32");
+        }
+        else {
+            console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
+        }
+        if (themeSettings.themeURL && !document.getElementById('mytheme')) {
+            var cssfile = document.createElement('link');
+            cssfile.id = 'mytheme';
+            cssfile.rel = 'stylesheet';
+            cssfile.href = themeURL;
+            document.getElementsByTagName('head')[0].appendChild(cssfile);
 
-            }
-            else if (themeSettings.themeURL && document.getElementById('mytheme'))
-            {
-                document.getElementById('mytheme').href = themeSettings.themeURL;
-            }
-            /**
-             * Save to localstorage
-             **/
-            var saveSettings = function()
-            {
-                themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item)
-                {
-                    return /^(nav|header|footer|mod|display)-/i.test(item);
-                }).join(' ');
-                if (document.getElementById('mytheme'))
-                {
-                    themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
-                };
-                localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
-            }
-            /**
-             * Reset settings
-             **/
-            var resetSettings = function()
-            {
-                localStorage.setItem("themeSettings", "");
-            }
+        }
+        else if (themeSettings.themeURL && document.getElementById('mytheme')) {
+            document.getElementById('mytheme').href = themeSettings.themeURL;
+        }
+        /**
+         * Save to localstorage
+         **/
+        var saveSettings = function () {
+            themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
+                return /^(nav|header|footer|mod|display)-/i.test(item);
+            }).join(' ');
+            if (document.getElementById('mytheme')) {
+                themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
+            };
+            localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
+        }
+        /**
+         * Reset settings
+         **/
+        var resetSettings = function () {
+            localStorage.setItem("themeSettings", "");
+        }
 
     </script>
     <!-- BEGIN Page Wrapper -->
@@ -1144,11 +1139,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <i class="fal fa-tv fa-2x"></i><br>系統監控
                             </a>
                             <div class="dropdown-menu">
-                                <button class="dropdown-item" type="button">電錶</button>
-                                <button class="dropdown-item" type="button">照明系統</button>
-                                <button class="dropdown-item" type="button">電梯系統</button>
-                                <button class="dropdown-item" type="button">環境感測</button>
-                                <button class="dropdown-item" type="button">空調系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>
                             </div>
                         </div>
                         <div class="btn-group mx-4">
@@ -2050,8 +2045,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="lib/vendors.bundle.js"></script>
     <script src="lib/app.bundle.js"></script>
     <script type="text/javascript">
-            /* Activate smart panels */
-            $('#js-page-content').smartPanel();
+        /* Activate smart panels */
+        $('#js-page-content').smartPanel();
 
     </script>
     <!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
@@ -2059,11 +2054,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="lib/statistics/flot/flot.bundle.js"></script>
     <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
     <script src="lib/datagrid/datatables/datatables.bundle.js"></script>
+    <script src="js/yourteam/yourteam.ajax.class.js"></script>
+    <script src="js/yourteam/yourteam.jquery.datatables.js"></script>
+    <script src="js/yourteam/yourteam.utility.class.js"></script>
+    <script src="js/yourteam/plugins/yt-tooltip/yt-tooltip.js"></script>
+    <script src="js/yourteam/plugins/yt-tab/yt-tab.js"></script>
+    <script src="js/style.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/init.js"></script>
     <script>
-          
-        $("#app").load("_dashboard.html");
-            
+       
 
+        $("#app").load("_dashboard.html");
+
+        $("body").on("click", "button[name^=sysMonBtn]", function () {
+            $("#app").load("_systemMonitor.html");
+        })
     </script>
 </body>
 <!-- END Body -->
diff --git a/Frontend/js/init.js b/Frontend/js/init.js
new file mode 100644
index 0000000..4bd8873
--- /dev/null
+++ b/Frontend/js/init.js
@@ -0,0 +1,7 @@
+var ytAjax = new YourTeam.Ajax(); //公用AJAX初始化
+var varRegApiUrl = "/reg/api/";  //註冊API路徑
+var varApiUrl = "/api/";  //API路徑
+var varPathImg = "/Upload/Images/";
+var varPathFile = "/Upload/Files/";
+var statusArr = { 1: "啟用", 0: "未啟用", 9: "刪除" };
+var objSendData = { Data: null };
\ No newline at end of file
diff --git a/Frontend/js/style.js b/Frontend/js/style.js
new file mode 100644
index 0000000..b79fc49
--- /dev/null
+++ b/Frontend/js/style.js
@@ -0,0 +1,1546 @@
+
+var dtSearchTitleParam = [];
+var btnIsClick = true;
+var ajaxReloadCallBack;
+
+window.YT = window.YT || {};
+YT.Math = {};
+
+
+/// <summary>
+/// | Dropdown | 建置dropdown
+/// </summary>
+/// <param type="object" name="eleObj">{btnId = 按鈕element Id ,dropdownId = 下拉選單 element Id}</param>
+/// <param type="array" name="divObj">[{id = input element id , name = input element name, type = input element type, other = input element other attr, parent = sub parent element id }]</param>
+$.fn.SetDropDown = function (eleObj, divObj) {
+    let btnEle = $("#" + eleObj.btnId);
+    let strHtml = ``;
+
+    btnEle.wrap("<div></div>");
+    strHtml += `<div id="${eleObj.dropdownId}" class="custom-dropdown sort-dropdown dropdown-menu" aria-labelledby="${eleObj.btnId}">`;
+    $.each(divObj, function (index, value) {
+        strHtml += `<div class="dropdown-item-checkbox ${value.parent != null && value.parent != undefined ? "dropdown-item-sub" : ""}">
+                        <input id="${value.id ?? ""}" name="${value.name ?? ""}" type="${value.type ?? ""}" value="${value.value ?? null}" class="dropdown-item-input" data-parent="${value.parent ?? ""}"  ${value.other ?? ""}>
+                        <label class="dropdown-item-input-label">${value.text ?? ""}</label>
+                    </div>`
+    })
+
+    btnEle.parent("div").append(strHtml);
+    $("#" + eleObj.dropdownId).find(".dropdown-item-checkbox input:checked").trigger("click", "init");
+}
+
+Array.prototype.Distinct = function () {
+    return this.filter((value, index, self) => { return self.indexOf(value) === index; });
+}
+Array.prototype.DistinctBy = function (...otherCol) {
+    const result = [];
+    $.each(this, function (index, value) {
+        let filInd = result.findIndex(function (v, i) {
+            let sameNum = 0;
+            $.each(otherCol, function (i2, v2) {
+                if (v[v2] == value[v2]) {
+                    sameNum++;
+                }
+            })
+            return sameNum == otherCol.length ? true : false;
+        })
+        if (filInd == -1) {
+            result.push(value);
+        }
+    })
+
+    return result;
+}
+BigInt.prototype.toJSON = function () { return this.toString() }
+
+$.fn.classList = function () { return this[0].className.split(/\s+/); };
+
+$.fn.replaceClass = function (oriClass, newClass) { $(this).removeClass(oriClass).addClass(newClass); return $(this) };
+
+//阿拉伯數字轉中文
+Number.prototype.toChinese = function () {
+    let chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
+    let chnUnitSection = ["", "萬", "億", "萬億", "億億"];
+    let chnUnitChar = ["", "十", "百", "千"];
+    let strIns = '', chnStr = '';
+    let unitPos = 0;
+    let section = this;
+    let zero = true;
+    while (section > 0) {
+        let v = section % 10;
+        if (v === 0) {
+            if (!zero) {
+                zero = true;
+                chnStr = chnNumChar[v] + chnStr;
+            }
+        } else {
+            zero = false;
+            if (unitPos == 0 || (unitPos == 1 && section > 1)) {
+                strIns = chnNumChar[v];
+            } else {
+                strIns = "";
+            }
+            strIns += chnUnitChar[unitPos];
+            chnStr = strIns + chnStr;
+        }
+        unitPos++;
+        section = Math.floor(section / 10);
+    }
+    return chnStr;
+}
+
+
+$(function () {
+    initTableEvent();
+    initddEleMargin();
+    select2bs4();
+    Date_Pic();
+    dataReadAttrbuite();
+})
+imgUploadFormat();
+setupSltAddress();
+jquValAddMethod();
+
+YT.Math.Random = function (min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+}
+
+/// <summary>
+/// Jquery validation add rule, select2 required.
+/// </summary>
+function jquValAddMethod() {
+    if ($.validator) {
+        $.validator.addMethod("requiredSelect", function (value, element) {
+
+            let selVal = $(element).find(`option:selected`).val();
+            let selText = $(element).find(`option:selected`).text();
+            if (selVal == 0 || selText.indexOf("無") != -1) {
+                return false;
+            }
+            return true;
+        }, "必須選擇")
+        $.validator.addMethod("requiredCheckbox", function (value, element) {
+
+            if ($(element).find("input:checkbox:checked").length == 0) {
+                return false;
+            }
+            return true;
+        }, "必須選擇")
+    }
+}
+
+/// <summary>
+/// Jquery validation form reValid on select2 change.
+/// </summary>
+$("body").on("change", ".select2bs4.error,.select2bs4.valid", function () {
+    $(this).parents("form").valid();
+})
+
+/// <summary>
+/// Html tag convert to HTML ASCII(Encode)
+/// </summary>
+/// <param type="string" name="target">Html tag</param>
+function HtmlEncode(str) {
+    let encodedStr = str.replace(/[\u0000-\u9999<>\&]/gim, function (i) {
+        return '&#' + i.charCodeAt(0) + ';';
+    });
+    return encodedStr;
+}
+
+function SignEncode(str) {
+    str = str.replace(/[\u0022\u0027]/gim, function (i) {
+        return '&#' + i.charCodeAt(0) + ';';
+    })
+    return str;
+}
+
+/// <summary>
+/// login Tab class active切換
+/// </summary>
+$("body").on("click", ".card ul.card-tab li.card-tab-option", function () {
+    $(".card ul.card-tab li.card-tab-option").removeClass("active");
+    $(this).addClass("active");
+})
+
+
+
+/// <summary>
+/// 判斷照片div裡是否有主圖，無主圖自動把第一張設為主圖
+/// </summary>
+/// <param type="string" name="target">div element Id</param>
+function isMasterImgExist(target) {
+    if ($(target).find("input[type=radio]:checked").length == 0) {
+        $(target).find("input[type=radio]:eq(0)").prop("checked", true);
+    }
+}
+
+/// <summary>
+/// 複製文字/網址
+/// </summary>
+/// <param type="string" name="target">element Id</param>
+function CopyUrlBtn(target, callback) {
+    let $temp = $("<input>");
+    $("body").append($temp);
+    $temp.val($(target).text()).select();
+    document.execCommand("copy");
+    $temp.remove();
+    callback ? callback() : "";
+}
+
+/// <summary>
+/// 驗證解除
+/// </summary>
+/// <param type="string" name="target">element Id</param>
+/// <param type="array" name="selDivArr">下拉選單div</param>
+function closeValidate(target, selDivArr) {
+    let selDivStr = '';
+    if (Object.keys($(target).validate().settings.rules).length != 0) {
+        if (selDivArr != undefined && selDivArr != null) {
+            selDivStr = selDivArr.toString();
+            $(selDivStr).rules("remove", "SelRequire");
+            $(selDivStr).find("select").unbind();
+            $(selDivStr).removeClass("error");
+        }
+        $("[aria-describedby^=tooltip]").tooltip("dispose");
+        $(target).validate().resetForm();
+    }
+}
+
+/// <summary>
+/// 重新驗證
+/// </summary>
+/// <param type="string" name="target">element Id</param>
+/// <param type="array" name="selDivArr">下拉選單div</param>
+function resetValidate(target, selDivArr, validate) {
+    closeValidate(target, selDivArr);
+    validate();
+    $(target).valid();
+}
+
+/// <summary>
+/// 價錢呈現統一
+/// </summary>
+/// <param type="string/int/float" name="Amt">價格</param>
+function AmtFormat(Amt) {
+    let type = 1;  // 0: parseInt(整數) , 1: parseFloat(小數點0省略) ,2: toFixed (小數點強制取位數-四捨五入)
+    let maxFixed = 2;   //取小數點後幾位
+    let result;    //輸出
+
+    if (Amt === null) {
+        return null;
+    }
+
+    Amt = Amt || 0;
+
+    if (type == 0) {
+        result = parseInt(Amt);
+    } else if (type == 1) {
+        result = parseFloat(Amt);
+    } else if (type == 2) {
+        result = parseFloat(Amt).toFixed(maxFixed);
+    }
+    return result
+}
+
+/// <summary>
+/// 時間格式統一
+/// </summary>
+/// <param type="string" name="dateTime">欲轉換格式之日期時間</param>
+/// <param type="string" name="dateType">需顯示的年月日時分秒毫秒，Y=年、M=月、d=日、H=時、m=分、s=秒、S=毫秒</param>
+/// <param type="string" name="locale">時區</param>
+function displayDate(dateTime, dateType = "YMdHms", locale = 'zh-TW') {
+    let result = '';
+    if (dateTime) {
+        let regex = /^\/Date\((\d+)\)\/$/gm;
+
+        let t = Date.parse(dateTime);  //若從資料庫回傳 /Date(xxxxxxxxxxxxxx)/ DateTime格式 
+        if (regex.test(dateTime)) {
+            t = parseInt(dateTime.replace(regex, '$1'));
+        }
+        //不符合時間格式
+        if (isNaN(t)) {
+            return null;
+        }
+
+        let options =
+        {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            fractionalSecondDigits: "3",
+            hourCycle: "h23",
+        }
+
+        let d = new Date(t).toLocaleString(locale, options);
+        d = new Date(d);
+
+        let year = '', month = '', day = '', hour = '', minute = '', second = '', millisecond = '', date = '', time = '';
+        if (dateType != "date" && dateType != "time" && dateType != "datetime") {
+            dateType.indexOf("Y") != -1 ? year = parseInt(d.getFullYear()) : "";
+            dateType.indexOf("M") != -1 ? month = parseInt(d.getMonth() + 1) : "";
+            dateType.indexOf("d") != -1 ? day = parseInt(d.getDate()) : "";
+            dateType.indexOf("H") != -1 ? hour = parseInt(d.getHours()) : "";
+            dateType.indexOf("m") != -1 ? minute = parseInt(d.getMinutes()) : "";
+            dateType.indexOf("s") != -1 ? second = parseInt(d.getSeconds()) : "";
+            dateType.indexOf("S") != -1 ? millisecond = parseInt(d.getMilliseconds()) : "";
+        } else if (dateType == "date") {
+            year = d.getFullYear();
+            month = String(d.getMonth() + 1).padStart(2, '0');
+            day = String(d.getDate()).padStart(2, '0');
+        } else if (dateType == "time") {
+            hour = String(d.getHours()).padStart(2, '0');
+            minute = String(d.getMinutes()).padStart(2, '0');
+        } else if (dateType == "datetime") {
+            year = d.getFullYear();
+            month = String(d.getMonth() + 1).padStart(2, '0');
+            day = String(d.getDate()).padStart(2, '0');
+            hour = String(d.getHours()).padStart(2, '0');
+            minute = String(d.getMinutes()).padStart(2, '0');
+        }
+        date = [year, month, day].filter(n => n).join("/");
+        time = [hour, minute, second, millisecond].filter(n => n).join(":");
+        result = date.toString() + " " + time.toString();
+
+        if (dateType == "date") {
+            result = date.toString();
+        } else if (dateType == "time") {
+            result = time.toString();
+        }
+    }
+    return $.trim(result);
+}
+
+/// <summary>
+/// datatable event 初始化
+/// </summary>
+function initTableEvent() {
+    let windowScrollTop = 0, tableScrollTop = 0;
+
+    //排序event
+    if ($.fn.dataTable != undefined && $.fn.dataTable != null) {
+        if ($.fn.dataTable.tables(true).length != 0) {  //若頁面有datatable
+            let table = '';
+            $($.fn.dataTable.tables(true)).each(function (index, value) {
+                table = $(value).DataTable();
+                let tableId = table.context[0].sTableId;
+                tabVis(table);
+
+                $(value).on("order.dt", function () {
+                    $(".popover").remove();  //popover清空
+                }).DataTable()
+                $(value).on("preDraw.dt", function () {
+                    tableScrollTop = $(`#${tableId}_wrapper .dataTables_scrollBody`).scrollTop();
+                    windowScrollTop = $(window).scrollTop();
+                }).DataTable()
+                $(value).on("draw.dt", function () {
+                    table.columns.adjust();
+                    $(window).scrollTop(windowScrollTop);
+                    $(`#${tableId}_wrapper .dataTables_scrollBody`).scrollTop(tableScrollTop);
+                    loadDtSearchCol(table);
+                    loadSesSearchCol();
+                    loadTabChk(tableId);
+                    tableHeadChkNotSort(tableId); //若head有checkbox，強制不sorting
+                }).DataTable()
+                dtReloadFn = (data) => {
+                    $(`#${tableId}_wrapper .dataTables_scrollBody`).scrollTop(tableScrollTop);
+                    $(window).scrollTop(windowScrollTop);
+                    ajaxReloadCallBack != undefined && ajaxReloadCallBack != null ? ajaxReloadCallBack() : "";
+                }
+            })
+
+
+            table.columns.adjust();
+
+
+        }
+    }
+}
+
+/// <summary>
+/// jquery loaded 事件
+/// </summary>
+function loadCallback(callback) {
+    select2bs4();
+    Date_Pic();
+    dataReadAttrbuite();
+    callback ? callback() : "";
+    initCkeditor();
+}
+
+
+
+/// <summary>
+/// dropdown aria-close 按下不消失dropdown
+/// </summary>
+$("body").on("click", ".dropdown-menu", function (e) {
+    let eleId = $(this)[0].id;
+    let eleLen = 0;
+    if (eleId) {
+        eleLen = $(`[data-target='${eleId}'][data-toggle='dropdown'][aria-close='false']`).length;
+    } else {
+        eleLen = $(this).prevAll("button[data-toggle='dropdown'][aria-close='false']").length
+    }
+    if (eleLen != 0) {
+        e.stopPropagation();
+    }
+})
+
+
+
+/// <summary>
+/// | Dropdown | 該parent底下sub element沒有勾選時，預設選擇下一個parent element
+/// </summary>
+/// <param type="element" name="Obj">dropdown sub input element</param>
+function ddSubEmptyCha(obj) {
+    let ddmenu = $(obj).parents(".dropdown-menu");
+    let parentId = $(obj).data("parent");
+    let chklen = ddmenu.find(`.dropdown-item-sub .dropdown-item-input[data-parent=${parentId}]:checked`).length;
+    if (chklen != 0) {
+        $("#" + parentId).prop("checked", true);
+    } else {
+        let chkRadioId = ddmenu.find(".dropdown-item-checkbox input[type=radio]:checked")[0].id;
+        $("#" + parentId).prop("checked", false);
+        if (ddmenu.find(`.dropdown-item-sub .dropdown-item-input[data-parent=${chkRadioId}]`).length != 0) {
+            if (ddmenu.find(`.dropdown-item-sub .dropdown-item-input[data-parent=${chkRadioId}]:checked`).length == 0) {
+                $(obj).prop("checked", true).change();
+            }
+        }
+    }
+}
+
+/// <summary>
+/// | Dropdown | 選擇sub element時
+/// </summary>
+$("body").on("change click", ".dropdown-item-sub .dropdown-item-input", function () {
+    $(this).prop("checked", true);
+    //ddSubEmptyCha(this);
+    otherSubCha(this);
+    subSubCha(this);
+    subChkParentCha(this);
+    ddSelectItemChaName(this);
+})
+
+/// <summary>
+/// | Dropdown | 選擇篩選下拉選單項目改變按鈕名稱
+/// </summary>
+/// <param type="element" name="Obj">dropdown input element</param>
+function ddSelectItemChaName(obj) {
+    let result = '';
+    result = $(obj).next("label").text();
+    //let ddmenu = $(obj).parents(".dropdown-menu");
+    //ddmenu.find(".dropdown-item-checkbox:not(.dropdown-item-sub) input:checked").each(function (index, value) {
+    //    reuslt = $(value).next("label").text();
+    //})
+    $(obj).parents(".dropdown-menu").prev("button").text(result);
+}
+
+/// <summary>
+/// | Dropdown | 選擇parent項目 該parent底下sub項目一起勾選，若勾選沒有sub的parent項目，其他sub取消勾選
+/// </summary>
+/// <param type="element" name="Obj">dropdown input element</param>
+function parentSubCha(obj) {
+    let ddmenu = $(obj).parents(".dropdown-menu");
+    if ($(obj).prop("checked") == true) {  //該(parent)element 被勾選後
+        if (ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).length != 0) {  //判斷底下若有sub element
+            ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).prop("checked", true);  //勾選底下所有sub element
+            ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).each(function (index, value) {
+                subSubCha("#" + $(value)[0].id);
+            })
+        } else {                                                                                 //判斷底下若沒有sub element
+            ddmenu.find(`.dropdown-item-sub input`).not(obj).prop("checked", false);    //其他sub element 取消勾選
+        }
+    }
+}
+
+/// <summary>
+/// | Dropdown | 選擇sub parent項目 該sub parent底下sub項目一起勾選，若勾選沒有sub的sub parent項目，其他sub取消勾選
+/// </summary>
+/// <param type="element" name="Obj">dropdown input element</param>
+function subSubCha(obj) {
+    let ddmenu = $(obj).parents(".dropdown-menu");
+    if ($(obj).prop("checked") == true) {  //該(sub)element 被勾選後
+        if (ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).length != 0) {  //判斷底下若有sub element
+            ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).prop("checked", true);  //勾選底下所有sub element
+        }
+    } else {                               //該(sub)element 取消勾選後
+        if (ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).length != 0) {  //判斷底下若有sub element
+            ddmenu.find(`.dropdown-item-sub input[data-parent=${$(obj)[0].id}]`).prop("checked", false);  //取消勾選底下所有sub element
+        }
+    }
+}
+
+/// <summary>
+/// | Dropdown | 選擇其中一sub項目 其他sub項目取消勾選
+/// </summary>
+/// <param type="element" name="Obj">dropdown input element</param>
+function otherSubCha(obj) {
+    let ddmenu = $(obj).parents(".dropdown-menu");
+    let parentId = $(obj).data("parent");
+    ddmenu.find(`.dropdown-item-checkbox.dropdown-item-sub .dropdown-item-input`).not(obj).prop("checked", false);
+}
+
+/// <summary>
+/// | Dropdown | 選擇其中一sub項目 該sub parent勾選
+/// </summary>
+/// <param type="element" name="Obj">dropdown input element</param>
+function subChkParentCha(obj) {
+    let parentId = $(obj).data("parent");
+    if ($(obj).prop("checked") == true) {
+        $("#" + parentId).prop("checked", true);
+    }
+}
+
+/// <summary>
+/// | Dropdown | 選擇parent element時
+/// </summary>
+$("body").on("change click", ".dropdown-item-checkbox:not(.dropdown-item-sub) .dropdown-item-input", function () {
+    ddSelectItemChaName(this);
+    parentSubCha(this);
+})
+
+/// <summary>
+/// | Dropdown | 初始化 parent sub element margin
+/// </summary>
+function initddEleMargin() {
+    $(".sort-dropdown .dropdown-item-checkbox:not(.dropdown-item-sub) .dropdown-item-input").each(function (index, value) {
+        let eleId = $(value)[0].id;
+        setddEleMargin(eleId, 0);
+    })
+}
+
+/// <summary>
+/// | Dropdown | set parent sub element margin
+/// </summary>
+/// <param type="string" name="eleId">dropdown input element</param>
+/// <param type="int" name="margin">input element css margin</param>
+function setddEleMargin(eleId, margin = 0) {
+    let subEle = $(`.sort-dropdown .dropdown-item-checkbox.dropdown-item-sub .dropdown-item-input[data-parent=${eleId}]`);
+    let subId = ``;
+    margin += 20;
+
+    $.each(subEle, function (index, value) {
+        subId = $(value)[0].id;
+        $(value).parent(".dropdown-item-checkbox").css("margin-left", margin + "px");
+        setddEleMargin(subId, margin);
+    })
+
+}
+
+/// <summary>
+/// | table Filter | filter tag close icon on the datatable top  (以datatable搜尋)
+/// </summary>
+$("body").on("click", ".tag-label-close[data-type='dt']", function () {
+    let table = $($.fn.dataTable.tables(true)).DataTable();
+    let id = $(this)[0].id;
+    let name = $(this).data("name");
+    $(this).parent(".tag-label").remove();
+    if (table) {
+        closeDtSearchCol(table, id, name);  //欄位搜尋清除
+    }
+})
+
+/// <summary>
+/// | table Filter | filter tag close icon on the datatable top (以session傳值搜尋(尚未用到))
+/// </summary>
+$("body").on("click", ".tag-label-close[data-type='ses']", function () {
+    let table = $($.fn.dataTable.tables(true)).DataTable();
+    let name = $(this).parent(".tag-label")[0].id.split("tagLabel_")[1].split("_")[0];
+    let sesName = window.location.pathname + "_" + name;
+    $(this).parent(".tag-label").remove();
+    if (table) {
+        closeSesSearchCol(table, sesName, $(this).parent("label"));
+    }
+})
+
+/// <summary>
+/// | table Filter | dropdown item on the datatable top 
+/// </summary>
+$("body").on("click", ".dataTables_wrapper .toolbar .dropdown-item-checkbox input", function (e, type) {
+    let tableId = $(this).parents(".dataTables_wrapper")[0].id.split("_wrapper")[0];
+    if (type != "init") {  //除了初始化以外，篩選過後頁面跳回至第1頁
+        $.each($("#" + tableId).DataTable().context[0].aoPreSearchCols, function (index, value) {
+            if (value.sSearch != '') {
+                $("#" + tableId).DataTable().column(index).search('');
+            }
+        })
+        $("#" + tableId).DataTable().page(0);
+    }
+    $("#" + tableId).DataTable().ajax.reload(null, false);
+})
+
+/// <summary>
+/// | table Filter | Load Datatable exists searching column.
+/// </summary>
+/// <param type="datatable" name="dt">executed datatable</param>
+function loadDtSearchCol(dt) {
+    $.each(dt.context[0].aoPreSearchCols, function (index, value) {
+        let id = "dtSearch_" + index;
+        if (value.sSearch != '') {
+            if ($(`.dataTables_wrapper > .selector .tag-label:contains(${value.sSearch})`).length == 0) {
+                let data = dt.context[0].aoColumns[index].data;
+                let title = setDtSearchTitle(dt, index, value)
+                let btnTemp = `<label id="" class="tag-label  mr-1">${title}<i id="${id}" data-type="dt" data-name="${data}" class="fas fa-times tag-label-close text-white ml-4"></i></label></div>`;
+                $(".dataTables_wrapper > .selector").append(btnTemp);
+            }
+        } else {
+            if ($("#" + id).length != 0) {
+                $("#" + id).click();
+            }
+        }
+    })
+}
+
+/// <summary>
+/// | table Filter | Set Datatable filter tag title on table top
+/// </summary>
+/// <param type="datatable" name="dt">executed datatable</param>
+/// <param type="int" name="index">SearchCol index</param>
+/// <param type="string" name="value">SearchCol value</param>
+function setDtSearchTitle(dt, index, value) {
+
+    let title = dt.context[0].aoColumns[index].filterName ?? dt.context[0].aoColumns[index].title;
+    let search = value.sSearch;
+    let filterName = dt.context[0].aoColumns[index].filterName ?? "";
+    if (filterName.indexOf("__TITLE__") != -1 || filterName.indexOf("__VALUE__") != -1) {
+        filterName = filterName.replace("__TITLE__", title);
+        filterName = filterName.replace("__VALUE__", search);
+        return filterName
+    } else {
+        return title + " : " + search;
+    }
+}
+
+/// <summary>
+/// | table Filter | Set "dtSearchTitleParam" variable, used to set Datatable filter title.
+/// </summary>
+/// <param type="string" name="paramStr">paramter string</param>
+function setDtSearchTitleParam(colName, param) {
+    param != null ? dtSearchTitleParam.push({ "name": colName, "text": param }) : "";
+}
+
+/// <summary>
+/// | table Filter | Cleaning Datatable search column when click filter tag icon.
+/// </summary>
+/// <param type="datatable" name="dt">executed Datatable</param>
+/// <param type="string" name="id">closeing filter icon element Id</param>
+function closeDtSearchCol(dt, id, name) {
+    let col = id.indexOf("dtSearch_") != -1 ? id.split("dtSearch_")[1] : "";
+    sessionStorage.removeItem(name);
+    localStorage.removeItem(name);
+    dt.column(col).search('').draw(false);
+}
+
+/// <summary>
+/// | table Filter | Load Datatable exists searching column (Session variable).
+/// </summary>
+function loadSesSearchCol() {
+    $.each(Object.keys(sessionStorage), function (index, value) {
+        if (value.indexOf(window.location.pathname) != -1) {
+            let result = JSON.parse(Object.values(sessionStorage)[index]);
+            let btnTemp = `<label id="tagLabel_${value.split("_")[1]}_${result[0].Id}" class="tag-label mr-1">${result[0].Text}<i id="closeLab${result[0].Id}" data-type="ses" class="fas fa-times tag-label-close text-white ml-4"></i></label></div>`;
+            $(".dataTables_wrapper > .selector").append(btnTemp);
+        }
+    })
+
+}
+
+/// <summary>
+/// | table Filter | Cleaning Datatable search column when click filter tag icon (Session variable).
+/// </summary>
+/// <param type="datatable" name="dt">executed Datatable</param>
+/// <param type="string" name="name">session name</param>
+/// <param type="element" name="obj">tag label element</param>
+function closeSesSearchCol(dt, name, obj) {
+    sessionStorage.removeItem(name);
+    obj.remove();
+    dt.ajax.reload(dtReloadFn, false);
+}
+
+function tabVis(dt) {
+    let columnArr = dt.context[0].aoColumns;
+    let strHtml = ``;
+    $.each(columnArr, function (index, value) {
+        strHtml += `<div class="custom-control custom-checkbox ml-2">
+                            <input class="custom-control-input" type="checkbox" id="tabVis_${value.data}" data-idx="${value.idx}" value="${value.data}"  ${value.bVisible ? "checked" : ""}>
+                            <label for="tabVis_${value.data}" class="custom-control-label">${value.title}</label>
+                        </div>`;
+    })
+    $("#table_filter").append(`<div class="btn-group"><button type="button" id="tabColVisBtn" class="btn btn-sm bg-gray-h t-white ml-2" data-toggle="dropdown" data-target="tabColVisDropdown" aria-close="false">欄位顯示</button>
+                                    <div id="tabColVisDropdown" class="custom-dropdown dropdown-menu dropdown-menu-right" aria-labelledby="tabColVisBtn" >
+                                        <div class="row p-2">
+                                           ${strHtml}
+                                        </div>
+                                    </div></div>`)
+
+    $("body").on("change", "input[id^=tabVis]", function () {
+        let idx = $(this).data("idx");
+        let chk = $(this).prop("checked");
+        dt.columns(idx).visible(chk);
+        dt.columns.adjust();
+    })
+}
+
+var tabChkArr = [];
+
+
+function tableHeadChkNotSort(tabId) {
+    $(`#${tabId} thead input:checkbox`).each(function (index, value) {
+        $(value).parents("th").removeClass("sorting_asc");
+        $(value).parents("th").removeClass("sorting_desc");
+    })
+}
+
+function loadTabChk(tabId) {
+    $(`#${tabId}_wrapper thead tr th input:checkbox`).prop("checked", false);
+    $.each(tabChkArr, function (index, value) {
+        $(`${tabId} tbody tr td input:checkbox[data-rowid=${value.rowId}]`).prop("checked", true).change();
+    })
+}
+
+/// <summary>
+/// | Sidebar | User headshot css adjusts on sidebar collapsing.
+/// </summary>
+$("html").on("mouseover", "body.sidebar-collapse .main-sidebar", function () {
+    $(this).find(".logo-link").css("width", "250px").css("overflow", "visible");
+    $(this).find(".logo-link img").css("left", "0px");
+    $(this).find(".user-panel .info").show();
+
+}).on("mouseleave", "body.sidebar-collapse .main-sidebar", function () {
+    $(this).find(".logo-link").css("width", "37px").css("overflow", "hidden").css("margin", "auto");
+    $(this).find(".logo-link img").css("left", "-16px");
+    $(this).find(".user-panel .info").hide();
+})
+
+/// <summary>
+/// | Sidebar | User headshot css adjusts on sidebar collapsing.
+/// </summary>
+$("body").on("click", ".nav-link[data-widget=pushmenu]", function () {
+    let obj = $(this).parents("body").find(".main-sidebar");
+    if ($(this).parents("body").hasClass("sidebar-collapse")) {
+        obj.find(".logo-link").css("width", "250px").css("overflow", "visible")
+        obj.find(".logo-link img").css("left", "0px");
+        obj.find(".user-panel .info").show();
+    } else {
+        obj.find(".logo-link").css("width", "37px").css("overflow", "hidden").css("margin", "auto");
+        obj.find(".logo-link img").css("left", "-16px");
+        obj.find(".user-panel .info").hide();
+    }
+})
+
+
+/// <summary>
+/// Set bootstrap modal and show
+/// </summary>
+/// <param type="string" name="type">warning, error ,success</param>
+/// <param type="string" name="id">modal div element id</param>
+/// <param type="string/object" name="title">modal header h4 tag title</param>
+/// <param type="string/object" name="content">modal body content</param>
+/// <param type="string/Array" name="btnArr">modal foot button</param>
+function ShowModal(type = null, id, title, content, btnArr) {
+    let btnHtml = ``, titleHtml = ``, conHtml = ``;
+    //foot按鈕
+    if ($.isArray(btnArr) == true) {
+        $.each(btnArr, (i, v) => {
+            if (typeof v == "object") {
+                let strData = '';
+                if (v.dataArr) {
+                    $.each(v.dataArr, function (index, value) {
+                        strData += "data-" + value.key + "=" + value.value;
+                    })
+                }
+                btnHtml += `<button ${v.id ? `id='${v.id}'` : ""} ${v.name ? `name='${v.name}'` : ""} 
+                            type="button" class="btn ${v.class ?? "btn-primary"}" ${v.dismiss ? "data-dismiss='modal'" : ""} ${strData || ""}>${v.text ?? "了解"}</button>`;
+            }
+        })
+    } else {
+        btnHtml = `<button type="button" class="btn btn-primary" data-dismiss="modal">了解</button>`;
+    }
+    //header title
+    if (typeof title == "object") {
+        titleHtml += `<h4 ${title.id ? `id=${title.id}` : ""} ${title.name ? `name=${title.name}` : ""}
+                    class="modal-title ${type ? `modal-icon-${type}` : ""} ${title.class ?? ""}" ${title.style ? `style="${title.style}"` : ""}">${title.text}</h4>`
+    } else {
+        titleHtml = `<h4 class="modal-title ${type ? `modal-icon-${type}` : ""}">${title}</h4>`;
+    }
+    //body content
+    if (typeof content == "object") {
+        conHtml += `<h4 ${content.id ? `id=${content.id}` : ""} ${content.name ? `name=${content.name}` : ""}
+                    class="${content.class ?? ""}" ${content.style ? `style="${content.style}"` : ""}">${content.text}</h4>`
+    } else {
+        conHtml = `<label class="w-100 text-center">${content}</label>`;
+    }
+
+    let strHtml = `<div id="${id}-Modal" class="modal fade" role="dialog">
+		                <div class="modal-dialog modal-dialog-centered">
+			                <!-- Modal content-->
+			                <div class="modal-content">
+				                <div class="modal-header">
+					                ${titleHtml}
+					                <button type="button" class="close" data-dismiss="modal">&times;</button>
+				                </div>
+				                <div class="modal-body">
+					                ${conHtml}
+				                </div>
+				                <div class="modal-footer">
+					                ${btnHtml}
+				                </div>
+			                </div>
+		                </div>
+	                </div>`;
+
+    $("body").prepend(strHtml);
+    $(`#${id}-Modal`).modal("show");
+
+    $("body").on("hidden.bs.modal", `#${id}-Modal`, function () {
+        setTimeout(function () { $(`#${id}-Modal`).remove(); }, 500)
+
+    })
+}
+
+
+/// <summary>
+/// init load select2 on Html after shown Modal
+/// </summary>
+$("body").on("shown.bs.modal", "div[id$='-Modal']", function () {
+    let table = $($.fn.dataTable.tables(true)).DataTable();
+    table.columns.adjust();
+
+    if ($("div[id$='-Modal'].show").length > 1) {
+        $($("div[id$='-Modal'].show")[0]).css("z-index", parseInt($($("div[id$='-Modal'].show")[1]).css("z-index")) + 2);
+        $(".modal-backdrop:last").css("z-index", parseInt($($("div[id$='-Modal'].show")[1]).css("z-index")) + 1);
+    }
+    select2bs4();
+    Date_Pic();
+})
+
+///// <summary>
+///// Modal hide show tip check exit.
+///// </summary>
+//$("body").on("hide.bs.modal", "div[id$='-Modal'][aria-mode='noticeMode']:not([aria-close='true'])", function (e) {
+//    console.log(e)
+//    let ariaType = $(this).find(".modal-body").attr("aria-type");
+//    if (ariaType && ariaType != "read") { 
+//        let modalId = $(this).attr("id");
+//        let btnArr = [{ id: "_modalBackToEdit", text: "繼續編輯", class: "btn-secondary", dismiss: true }, { id: "_modalExit", text: "離開", dismiss:true,dataArr: [{ key: "id", value: modalId }]}]
+//        ShowModal("warning", "closeModalWarning", "資料即將遺失", "資料不會被保存，確認離開此編輯頁面？", btnArr);
+//        return false;
+//    }
+//})
+
+///// <summary>
+///// click modal tip check exit button.
+///// </summary>
+//$("body").on("click", "#closeModalWarning-Modal #_modalExit", function (e) {
+//    let modalId = $(this).data("id");
+//    $("#" + modalId).attr("aria-close", true);
+//    $("#" + modalId).modal("hide");
+//    setTimeout(function () {
+//        $("#" + modalId).removeAttr("aria-close");
+//    },1000)
+
+//})
+
+/// <summary>
+/// init load select2 on Html after shown Modal
+/// </summary>
+$("body").on("hidden.bs.modal", "div[id$='-Modal']", function (e) {
+    if ($("body > .modal-backdrop.show").length != 0) {
+        $("body").addClass("modal-open");
+    }
+})
+
+
+/// <summary>
+/// init load select2 on Html after shown Modal
+/// </summary>
+$("body").on("show.bs.modal", "div[id$='-Modal']", function () {
+    if ($(this).find(".GiCouCode").length != 0) {
+        $(this).find(".GiCouCode").change();
+        $(this).find(".GiCitCode").change();
+    }
+    select2bs4();
+    Date_Pic();
+})
+
+/// <summary>
+/// init load select2
+/// </summary>
+function select2bs4(selector = null) {
+    selector = selector || ".select2bs4";
+    if ($(selector).length != 0) {
+        $(selector).each((i, obj) => {
+            let colArr = $(obj).classList().filter(x => x.indexOf("col-") != -1);
+            colArr.length != 0 ? colArr.push("p-0") : "";
+            let $sel = $(obj).select2({
+                theme: 'bootstrap4',
+                /* width: 'auto',*/
+                minimumResultsForSearch: -1,
+                containerCssClass: $(obj).hasClass("form-control-sm") ? "form-control-sm" : "",
+            });
+            $sel.data().select2.$container.addClass(colArr.join(" "));
+            //console.log($(obj).select2().data().select2)
+        })
+    }
+
+    function memSelFormat(icon) {
+        let fbName = $(icon.element).data("fb");
+        let lineName = $(icon.element).data("line");
+        let realName = icon.text;
+        let id = icon.id;
+        return $(`<span>${realName} ${memLineName(lineName, id)}${memFbName(fbName, id)}</span>`);
+    };
+
+    statusSelDraHtml();
+
+    $(selector).each((index, value) => {
+        let selVal = $(value).data("read-value");
+        if (selVal !== undefined && selVal !== null && selVal !== "") {
+            $(value).find(`option[value=${selVal}]`).prop("selected", true);
+            $(value).change();
+        }
+    })
+}
+
+/// <summary>
+/// Set status select draw to html.
+/// </summary>
+function statusSelDraHtml() {
+    if (typeof statusArr != "undefined") {
+        let strHtml = `<option value="1">${statusArr[1]}</option>
+                   <option value="0">${statusArr[0]}</option>`;
+        $("select[data-seltype='status']").html(strHtml);
+    }
+}
+
+/// <summary>
+/// Set table Ststus column value style.
+/// </summary>
+/// <param type="string" name="value">column value</param>
+function setTableStatus(value) {
+
+    let text = value == 1 ? statusArr[1] : value == 0 ? statusArr[0] : statusArr[9];
+    return `<label class="status-tag" data-value="${value}">${text}</label>`;
+
+}
+
+/// <summary>
+/// | Upload-File | Limit images format on Upload form.
+/// </summary>
+function imgUploadFormat() {
+    $("div[id^=preview]").parent("div").find("input[type='file']").attr("accept", "image/jpeg, image/png");
+}
+
+/// <summary>
+/// Using Ajax get image.
+/// </summary>
+/// <param type="int" name="sysTabId">SysTabId</param>
+/// <param type="int" name="rowId">RowId</param>
+/// <param type="int" name="fpId">FilPurId</param>
+/// <param type="int" name="fkId">FilKinId</param>
+/// <param type="function" name="success">success callback</param>
+function getImg(sysTabId, rowId, fpId, fkId, success) {
+    Sccp5Ajax = new SCCP5.Ajax(varApiUrl + `sp_File_Sl/byParams?SysTabId=${sysTabId}&Rowid=${rowId}&FilPurId=${fpId}&FilKinId=${fkId}`, null, success).send();
+}
+
+/// <summary>
+/// Read image through the path.
+/// </summary>
+/// <param type="string" name="imgName">imgName</param>
+function readImg(imgName, thumb = false) {
+    let result = '';
+    result = varPathImg + "/" + (thumb ? "s" : "") + (imgName || "");
+
+    return result;
+}
+
+/// <summary>
+/// Read image through the path.
+/// </summary>
+/// <param type="string" name="imgName">imgName</param>
+function imgHtml(src, cls = null, width = 70, height = null) {
+    let result = '';
+    if (src != null && src != "" && src != undefined) {
+        result = `<img class="${cls ?? ""}"src="${src}" style="${width ? `width:${width}px;` : ""} ${height ? `height:${height}px;` : ""}" onerror="defImg(this)">`
+    }
+    return result;
+}
+
+/// <summary>
+/// Json to base64 put on Url.
+/// </summary>
+/// <param type="object" name="Object">Object</param>
+function utoa(obj) {
+    let result = btoa(unescape(encodeURIComponent(obj)));
+    result = result.split("=")[0];
+    result = result.replace("+", "-");
+    result = result.replace("/", "_");
+    return result
+}
+
+/// <summary>
+/// Base64 convert to string
+/// </summary>
+/// <param type="object" name="str">string</param>
+function atou(str) {
+    let result = decodeURIComponent(escape(atob(str)));
+    return result
+}
+
+/// <summary>
+/// Protecting the input element value overflows max value.
+/// </summary>
+/// <param type="object" name="Object">Object</param>
+$("body").on("keyup", "input[max]", function () {
+    parseFloat($(this).val()) > parseFloat($(this).attr("max")) ? $(this).val($(this).attr("max")) : "";
+})
+
+/// <summary>
+/// Date Time Picker Initial
+/// </summary>
+function Date_Pic() {
+    if ($.fn.datetimepicker) {
+        $('i.fa-calendar').parents("div.date").datetimepicker({
+            format: 'YYYY/MM/DD',
+        });
+
+        $('i.fa-clock').parents("div.date").datetimepicker({
+            format: 'HH:mm',
+        });
+    }
+}
+
+/// <summary>
+/// Form disabled 
+/// </summary>
+/// <param type="string" name="id">Object</param>
+function formDisabled(id) {
+    $(`form#${id} input,form#${id} select,form#${id} textarea`).prop("disabled", true);
+}
+
+/// <summary>
+/// Image full show on click.
+/// </summary>
+$("body").on("click", "img[data-extname]", function () {
+    let ext = ["jpg", "jpeg", "png", "gif"];
+    if (ext.indexOf($(this).data("extname")) != -1) {
+        $("body").append("<div class='image-full-show'></div>");
+        let strhtml = $($(this).clone()).addClass("image-full");
+        $(".image-full-show").html(strhtml);
+    }
+})
+
+/// <summary>
+/// Image full hide on click.
+/// </summary>
+$("body").on("click", ".image-full-show", function () {
+    $(".image-full-show").remove();
+})
+
+/// <summary>
+/// decimal place on floor.
+/// </summary>
+function roundDown(num, decimal) {
+    return Math.floor((num + Number.EPSILON) * Math.pow(10, decimal)) / Math.pow(10, decimal);
+}
+
+function setupSltAddress() {
+    if ($(".GiCouCode,.GiCitCode,.GiPosCode").length != 0) {
+        $(".GiCouCode").html(`<option value="0">請選擇國家</option>`);
+        $(".GiCitCode").html(`<option value="0">請選擇縣市</option>`);
+        $(".GiPosCode").html(`<option value="0">請選擇鄉鎮</option>`);
+        setupGiCouCode();
+        setupGiCitCode();
+        setupGiPosCode();
+        $(".GiCouCode").each((index, value) => {
+            $(value).change();
+        })
+    }
+}
+
+// 0-4  //設定 "國家" 下拉選單
+function setupGiCouCode() {
+    //ajax 成功函式
+    function Success(data) {
+        let htmlStr = '';
+
+        $.each(data, function (index, element) {
+            htmlStr += `<option value=${element.Code} data-valname="${element.Name}">${element.Code} ${element.Name} </option>`;
+        });
+        $(".GiCouCode").html(htmlStr);
+    }
+
+    Sccp5Ajax = new SCCP5.Ajax("/Utility/GetGiCountry", null, Success).send();
+}
+
+// 0-4-1  //設定 "縣市" 下拉選單
+function setupGiCitCode() {
+    $("body").on("change", ".GiCouCode", function (e) {
+        e.preventDefault();
+        let obj = this;
+        let objName = $(obj).data("name");
+        let selectedText = $(this).find("option:selected").text();
+        $(this).next("span.select2").find(".select2-selection__rendered").text(selectedText).attr("title", selectedText);
+
+        //抓國家碼 886
+        let GiCouCode = $(this).find("option:selected").val();
+        //判斷選取國家後是否有資料
+        $(obj).nextAll('.GiCitCode').length == 0 ? $(`select[data-name=${objName}].GiCitCode`).empty() : $(obj).nextAll('.GiCitCode').empty();
+        $(obj).nextAll('.GiPosCode').length == 0 ? $(`select[data-name=${objName}].GiPosCode`).empty() : $(obj).nextAll('.GiPosCode').empty();
+
+        if (GiCouCode == "") {
+            return false
+        }
+        //ajax 成功函式
+        function Success(data) {
+            let htmlStr = `<option value="0">請選擇縣市</option>`;
+            let htmlStr2 = `<option value="0">請選擇鄉鎮</option>`;
+            $.each(data, function (index, element) {
+                htmlStr += `<option value=${element.Code} data-valname="${element.Name}">${element.Code} ${element.Name} </option>`;
+            });
+
+            $(obj).nextAll('.GiCitCode').length == 0 ? $(`select[data-name=${objName}].GiCitCode`).html(htmlStr) : $(obj).nextAll('.GiCitCode').html(htmlStr);
+            $(obj).nextAll('.GiPosCode').length == 0 ? $(`select[data-name=${objName}].GiPosCode`).html(htmlStr2) : $(obj).nextAll('.GiPosCode').html(htmlStr2);
+        }
+
+        Sccp5Ajax = new SCCP5.Ajax("/Utility/GetGiCity?CountryCode=" + GiCouCode, null, Success).send();
+    });
+    //$(".GiCouCode").change();
+}
+
+// 0-4-2  //設定 "鄉鎮區" 下拉選單
+function setupGiPosCode() {
+    $("body").on("change", ".GiCitCode", function (e) {
+        e.preventDefault();
+        let obj = this;
+        let objName = $(obj).data("name");
+        let htmlStr = `<option value="0">請選擇鄉鎮</option>`;
+        let selectedText = $(this).find("option:selected").text();
+        $(this).next("span.select2").find(".select2-selection__rendered").text(selectedText).attr("title", selectedText);
+
+        let GiCouCode = $(this).parent("div").find(".GiCouCode option:selected").val();
+        let GiCitName = $(this).parent("div").find(".GiCitCode option:selected").text().split(" ")[1];
+        $(obj).nextAll('.GiPosCode').length == 0 ? $(`select[data-name=${objName}].GiPosCode`).html(htmlStr) : $(obj).nextAll('.GiPosCode').html(htmlStr);
+
+        if (GiCouCode == "" || GiCitName == undefined) {
+            return false
+        }
+        //ajax 成功函式
+        function Success(data) {
+            //console.log(data);
+            $.each(data, function (index, element) {
+                htmlStr += `<option value=${element.Code} data-valname="${element.Name}" >${element.Code.substr(0, 3)} ${element.Name} </option>`;
+            });
+            $(obj).nextAll('.GiPosCode').length == 0 ? $(`select[data-name=${objName}].GiPosCode`).html(htmlStr) : $(obj).nextAll('.GiPosCode').html(htmlStr);
+        }
+
+        Sccp5Ajax = new SCCP5.Ajax("/Utility/GetGiPosCode/byParams?CityName=" + GiCitName, null, Success).send();
+    });
+    //$(".GiCitCode").change();
+}
+
+function chkboxToHtml(id, name, value, text, cls, other, dataArr = []) {
+    let dataStr = '';
+    $.each(dataArr, function (index, v) {
+        dataStr += `data-${v.key}='${v.value}' `;
+    })
+    let result = `<div class="custom-control custom-checkbox ${cls ?? ""}">
+                    <input class="custom-control-input" type="checkbox" id="${id ?? ""}" name="${name ?? ""}" value="${value ?? ""}" ${dataStr}>
+                    <label for="${id ?? ""}" class="custom-control-label row align-items-center m-0 mr-2">${text ?? ""}</label>
+                    ${other ?? ""}
+                </div>`;
+    return result;
+}
+
+
+$("body").on("change", "input:checkbox[value='_all'],input:checkbox[value='_one']", function () {
+    let togType = $(this).val().split("_")[1];
+    let chkName = $(this).attr("name");
+    let chked = $(this).prop("checked");
+    //相同name屬性 checkbox 皆勾選
+    $(`input:checkbox[name=${chkName}]`).prop("checked", chked);
+    //觸發勾選 checkbox change事件
+    $(`input:checkbox[name=${chkName}]:not([value='_${togType}'])`).trigger("change", ["mannual"]);
+    //最後element 觸發 ajax reload 事件
+    $(`input:checkbox[name=${chkName}]:not([value='_${togType}']):last`).change();
+})
+
+$("body").on("change", "input:checkbox[data-bindfilname]", function () {
+    let chkName = $(this).data("bindfilname");
+    let chked = $(this).prop("checked");
+    $(`input:checkbox[name=${chkName}]`).prop("checked", chked);
+    $(`input:checkbox[name=${chkName}]:not([value='_all']):last`).trigger("change", ["mannual"]);
+    $(`input:checkbox[name=${chkName}]:not([value='_all']):last`).change();
+})
+
+$("body").on("change", "input:checkbox[name]", function () {
+    //當有name的情況時，判斷若有全選checkbox，全部checked後全選checkbox按下。
+    let chkName = $(this).attr("name");
+    let chked = $(this).prop("checked");
+    chkBaseNameAll(chkName);
+    chkBaseNameOne(chkName);
+    chkBindFilNameChked(chkName, chked);
+})
+
+
+/// <summary>
+/// | Checkbox | Base on checkbox element name execute all checked.
+/// </summary>
+function chkBaseNameAll(chkName) {
+    let len = $(`input:checkbox[name=${chkName}]:not([value='_all'])`).length;
+    $(`input:checkbox[value='_all'][name=${chkName}]`).prop("checked", false);
+    $(`input:checkbox[name=${chkName}]:not([value='_all'])`).each((i, v) => {
+        if (!$(v).prop("checked")) {
+            return false;
+        }
+        len == i + 1 ? $(`input:checkbox[value='_all'][name=${chkName}]`).prop("checked", true) : "";
+    })
+
+}
+
+/// <summary>
+/// | Checkbox | Tick If there is one. 
+/// </summary>
+function chkBaseNameOne(chkName) {
+    $(`input:checkbox[value='_one'][name=${chkName}]`).prop("checked", false);
+    if ($(`input:checkbox[name=${chkName}]:not([value='_one']):checked`).length != 0) {
+        $(`input:checkbox[value='_one'][name=${chkName}]`).prop("checked", true);
+    }
+}
+
+
+/// <summary>
+/// | Checkbox | If the checkbox has 'bindfilname' dataset , auto checked.
+/// </summary>
+function chkBindFilNameChked(chkName, chked) {
+    if (!chked) {
+        chked = $(`input:checkbox[name=${chkName}]:checked`).length == 0 ? false : true;
+    }
+    $(`input:checkbox[data-bindfilname=${chkName}]`).prop("checked", chked);
+}
+
+function dataReadAttrbuite() {
+    $("[data-read-type='checkbox'][data-read-value]").each(function (index, value) {
+        let val = $(value).data("read-value");
+        if (val != undefined && val != null && val != "") {
+            //example : 12,22,31,55
+            if (val.toString().indexOf(",") != -1) {
+                $.each(val.split(","), function (index2, value2) {
+                    $(value).find(`input:checkbox[value=${value2}]`).prop("checked", true).change();
+                })
+            }
+            //example : 22
+            else {
+                $(value).find(`input:checkbox[value=${val}]`).prop("checked", true).change();
+            }
+        }
+    })
+    $("[data-read-type='text'][data-read-value]").each(function (index, value) {
+        let val = $(value).data("read-value");
+        if (val != undefined && val != null && val != "") {
+            //example : xxxx,xxxxxx,xxxxxxxxx,xxxxxxx
+            if (val.toString().indexOf(",") != -1) {
+                $.each(val.split(","), function (index2, value2) {
+                    $(value).find(`input[type=text]:eq(${index2})`).val(value2).change();
+                })
+            }
+            //example : xxxxxx
+            else {
+                $(value).find(`input[type=text]:first`).val(val).change();
+            }
+        }
+    })
+    $("[data-read-type='radio'][data-read-value]").each(function (index, value) {
+        let val = $(value).data("read-value");
+        if (val != undefined && val != null && val != "") {
+            //example : 12,22,31,55
+            if (val.toString().indexOf(",") != -1) {
+                $.each(val.split(","), function (index2, value2) {
+                    $(value).find(`input:radio[value=${value2}]`).prop("checked", true).change();
+                })
+            }
+            //example : 22
+            else {
+                $(value).find(`input:radio[value=${val}]`).prop("checked", true).change();
+            }
+        }
+    })
+    $("select[data-read-value]").each(function (index, value) {
+        let selVal = $(value).data("read-value");
+        if (selVal !== undefined && selVal !== null && selVal !== "") {
+            $(value).find(`option[value=${selVal}]`).prop("selected", true);
+            $(value).change();
+        }
+    })
+
+}
+// custom tab
+// example : 
+// <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
+// <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
+$("body").on("click", "[data-tabname][data-target]", function () {
+    let target = $(this).data("target");
+    let obj = this;
+    let tabName = $(target).data("tabname");
+    if (tabName) {
+        if ($(target).data("tabrole") == "child") {
+            $(obj).trigger("yt:tab:show");
+            $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();
+            $(target).show().animate({ opacity: 1 }, 200, function () {
+                $(obj).trigger("yt:tab:shown");
+            });
+        }
+    }
+})
+
+function toBool(boolstr) {
+    if (boolstr && typeof boolstr == "string") {
+        return boolstr.toLowerCase() === "true";
+    }
+    return null;
+}
+
+/**
+ * 下載檔案
+ * @param {any} url
+ * @param {any} filename
+ */
+async function download(url, filename) {
+
+    let toDataURL = function (url) {
+        return fetch(url).then((response) => {
+            if (!response.ok) {
+                throw new Error("Not 2xx response", { cause: response });
+            } else {
+                return response.blob();
+            }
+        }).then(blob => {
+            return URL.createObjectURL(blob);
+        }).catch(function (error) {
+            return null;
+        });
+    }
+
+    const a = document.createElement("a");
+    let href = await toDataURL(url)
+    if (href) {
+        a.href = href;
+        a.download = filename ? filename : "";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        return true;
+    } else {
+        return false;
+    }
+
+}
+
+/**
+ * element array sort
+ * @param {any} selector
+ * @param {any} attrName
+ */
+function getSorted(selector, attrName) {
+    return $($(selector).sort(function (a, b) {
+        var aVal = parseInt($(a).attr(attrName)),
+            bVal = parseInt($(b).attr(attrName));
+        return aVal - bVal;
+    }));
+}
+
+//data-tourl 
+$("body").on("click", "[data-tourl]", function () {
+    let url = $(this).data("tourl");
+    if ($(this).data("target") == "_blank") {
+        window.open(url, "_blank");
+    } else {
+        location.href = url;
+    }
+});
+
+/**
+*
+*  Base64 encode / decode
+*  http://www.webtoolkit.info/
+*
+**/
+
+YT.Base64 = {
+
+    // private property
+    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+    // public method for encoding
+    encode: function (input) {
+        var output = "";
+        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+        var i = 0;
+
+        input = YT.Base64._utf8_encode(input);
+
+        while (i < input.length) {
+
+            chr1 = input.charCodeAt(i++);
+            chr2 = input.charCodeAt(i++);
+            chr3 = input.charCodeAt(i++);
+
+            enc1 = chr1 >> 2;
+            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+            enc4 = chr3 & 63;
+
+            if (isNaN(chr2)) {
+                enc3 = enc4 = 64;
+            } else if (isNaN(chr3)) {
+                enc4 = 64;
+            }
+
+            output = output +
+                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
+                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
+
+        }
+
+        return output;
+    },
+
+    // public method for decoding
+    decode: function (input) {
+        var output = "";
+        var chr1, chr2, chr3;
+        var enc1, enc2, enc3, enc4;
+        var i = 0;
+
+        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+        while (i < input.length) {
+
+            enc1 = this._keyStr.indexOf(input.charAt(i++));
+            enc2 = this._keyStr.indexOf(input.charAt(i++));
+            enc3 = this._keyStr.indexOf(input.charAt(i++));
+            enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+            chr1 = (enc1 << 2) | (enc2 >> 4);
+            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+            chr3 = ((enc3 & 3) << 6) | enc4;
+
+            output = output + String.fromCharCode(chr1);
+
+            if (enc3 != 64) {
+                output = output + String.fromCharCode(chr2);
+            }
+            if (enc4 != 64) {
+                output = output + String.fromCharCode(chr3);
+            }
+
+        }
+
+        output = YT.Base64._utf8_decode(output);
+
+        return output;
+
+    },
+
+    // private method for UTF-8 encoding
+    _utf8_encode: function (string) {
+        string = string.replace(/\r\n/g, "\n");
+        var utftext = "";
+
+        for (var n = 0; n < string.length; n++) {
+
+            var c = string.charCodeAt(n);
+
+            if (c < 128) {
+                utftext += String.fromCharCode(c);
+            }
+            else if ((c > 127) && (c < 2048)) {
+                utftext += String.fromCharCode((c >> 6) | 192);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+            else {
+                utftext += String.fromCharCode((c >> 12) | 224);
+                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+
+        }
+
+        return utftext;
+    },
+
+    // private method for UTF-8 decoding
+    _utf8_decode: function (utftext) {
+        var string = "";
+        var i = 0;
+        var c = c1 = c2 = 0;
+
+        while (i < utftext.length) {
+
+            c = utftext.charCodeAt(i);
+
+            if (c < 128) {
+                string += String.fromCharCode(c);
+                i++;
+            }
+            else if ((c > 191) && (c < 224)) {
+                c2 = utftext.charCodeAt(i + 1);
+                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+                i += 2;
+            }
+            else {
+                c2 = utftext.charCodeAt(i + 1);
+                c3 = utftext.charCodeAt(i + 2);
+                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+                i += 3;
+            }
+
+        }
+
+        return string;
+    }
+
+}
+
+YT.Url = function (url, ...other) {
+    let paramArr = [];
+    $.each(other, function (index, value) {
+        if (typeof value == "object") {
+            $.each(value, function (index2, value2) {
+                if (value2 != null) {
+                    paramArr.push(index2 + "=" + value2);
+                }
+            })
+        }
+    })
+
+    if (paramArr.length == 0) {
+        if (url[url.length - 1] == "?") {
+            url.splice(url.length - 1, 1);
+        }
+    } else {
+        if (url.indexOf("?") == -1) {
+            url += "?";
+        } else {
+            if (url[url.length - 1] != "?") {
+                url[url.length - 1] != "&" ? url + "&" : "";
+            }
+        }
+    }
+    url = url + paramArr.join("&");
+    return url;
+}
+
+YT.Loading = function (type, ele = null, text = null, delay = 0) {
+    if (type == "start") {
+        let html = `<div class="yt-page-loading"></div>`;
+        $("body").append(html)
+        ele = YTAlert.Tip(text || "資料上傳中，請勿離開頁面。", "show");
+        return ele;
+    } else if (type == "finish" && ele != null) {
+        $(".yt-page-loading").fadeOut();
+        $(ele.ele).YTAlert().hide(delay);
+    }
+}
\ No newline at end of file
diff --git a/Frontend/js/yourteam/plugins/yt-tab.js b/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
similarity index 59%
rename from Frontend/js/yourteam/plugins/yt-tab.js
rename to Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
index 0da1daa..e4d816d 100644
--- a/Frontend/js/yourteam/plugins/yt-tab.js
+++ b/Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
@@ -1,4 +1,14 @@
-
+/**
+ * YourTeam 上方 Tab 頁籤
+ * 
+ * 使用方式：
+ * <button type="button" data-tabname="testTab" data-target="testDiv1">頁籤按鈕1</button>
+ * <button type="button" data-tabname="testTab" data-target="testDiv2">頁籤按鈕2</button>
+ * 
+ * <div id="testDiv1" data-tabname="testTab" data-tabrole="child"></div>
+ * <div id="testDiv2" data-tabname="testTab" data-tabrole="child"></div>
+ * */
+var YT = YT || {};
 
 var _ytTabInited = []
 $(function () {
@@ -11,21 +21,21 @@ $(function () {
     })
 })
 
-class YTTab {
+class YourTeamTab {
     constructor(option = {}) {
         this.tabName = option.tabName ?? null;
+        this.init()
     }
 
-    init();
-
-    init() {
-        $(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).css("display", "none");
-        $(`[data-tabname=${this.tabName}][data-target][data-tabrole='child']`).first().show();
-
+    init = function() {
+        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
+        $(`[data-tabname=${this.tabName}][data-tabrole=child]`).first().show();
+        console.log("inited")
         this.event();
     }
 
-    event() {
+    event = function () {
+        let clsObj = this;
         // custom tab
         // example : 
         // <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
@@ -33,6 +43,8 @@ class YTTab {
         $("body").on("click", `[data-tabname=${this.tabName}][data-target]`, function () {
             let target = $(this).data("target");
             let obj = this;
+            $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
+            $(obj).addClass("active")
             let tabName = $(target).data("tabname");
             if (tabName) {
                 if ($(target).data("tabrole") == "child") {
@@ -46,3 +58,5 @@ class YTTab {
         })
     }
 }
+
+YT.Tab = YT.Tab || YourTeamTab;
\ No newline at end of file
diff --git a/Frontend/js/yourteam/plugins/yt-tooltip.js b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
similarity index 88%
rename from Frontend/js/yourteam/plugins/yt-tooltip.js
rename to Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
index 9a5cca2..426c382 100644
--- a/Frontend/js/yourteam/plugins/yt-tooltip.js
+++ b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
@@ -1,4 +1,22 @@
-$.fn.YTTooltip = function (option) {
+/**
+ * YourTeam Tooltips(Popover) 小視窗
+ * 
+ * 使用方式：
+ * <button type="button" id="testBtn">出現視窗</button>
+ * 
+ * <script>
+ *    $("#testBtn").YTTooltip({ option... });
+ * </script>
+ * */
+
+/**
+ * option :
+ *    html -> 出現內容 (ex: <div><p>你好</p></div>)
+ *    toggle -> 觸發條件 (click/hover)
+ *    direction -> 顯示位置 (top/bottom/left/right)
+ *    onShow -> callback 顯示後
+ */
+$.fn.YTTooltip = function (option) {
     let eleArr = [];
 
     this.each(function (index, value) {
@@ -9,7 +27,7 @@
             html: $(option.html) || '',
             tooltipDiv: null,
             direction: option.direction || 'bottom',
-            toggle: "click",
+            toggle: option.toggle || "click",
             hideTooltipEvent: hideTooltipEvent,
             onShow: option.onShow || null,
         };
@@ -45,7 +63,7 @@
                 //tooltip 高寬
                 let toolWidth = $(clone)[0].offsetWidth;
                 let toolHeight = $(clone)[0].offsetHeight;
-
+                //超出視窗計算
                 let left = offset.left + width + toolWidth > bodyWidth ? offset.left - toolWidth : offset.left + width;
                 let top = offset.top + height + toolHeight > bodyHeight ? offset.top - toolHeight : offset.top + height;
 
diff --git a/Frontend/js/yourteam/yourteam.jquery.datatables.js b/Frontend/js/yourteam/yourteam.jquery.datatables.js
index 1023322..6059d25 100644
--- a/Frontend/js/yourteam/yourteam.jquery.datatables.js
+++ b/Frontend/js/yourteam/yourteam.jquery.datatables.js
@@ -166,31 +166,31 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
                 async:false,
                 dataSrc: sendData,
             },
-            "responsive": {
-                details: {
-                    target: '.dt-mobile-btn',
-                    renderer: function (api, rowIdx, columns) {
-                        var data = $.map(columns, function (col, i) {
-                            return col.hidden ?
-                                '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
-                                '<td>' + col.title + ':' + '</td> ' +
-                                '<td>' + col.data + '</td>' +
-                                '</tr>' :
-                                '';
-                        }).join('');
+            //"responsive": {
+            //    details: {
+            //        target: '.dt-mobile-btn',
+            //        renderer: function (api, rowIdx, columns) {
+            //            var data = $.map(columns, function (col, i) {
+            //                return col.hidden ?
+            //                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
+            //                    '<td>' + col.title + ':' + '</td> ' +
+            //                    '<td>' + col.data + '</td>' +
+            //                    '</tr>' :
+            //                    '';
+            //            }).join('');
 
-                        return data ?
-                            $('<table/>').append(data) :
-                            false;
-                    }
-                },
-            },
+            //            return data ?
+            //                $('<table/>').append(data) :
+            //                false;
+            //        }
+            //    },
+            //},
             "data": null,
             "EmptyTable": true,
             "destroy": true,
             "processing": false,
             "sDom":'<"toolbar">frtipl',
-            "pagingType": $(window).width() < 768 ? "simple" : "full_numbers_custom",
+            "pagingType": "simple",
             //"responsive": true,
             "autoWidth": true,
             "aoColumns": columns,
@@ -198,17 +198,17 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
             "deferRender": true,
             "fixedColumns": true,
             "stateSave": true,
-            "scrollX": true,
-            "scrollY": "700px",
-            "scrollCollapse": true,
+            //"scrollX": true,
+            //"scrollY": "700px",
+            //"scrollCollapse": true,
             "autoWidth": true,
             //"sScrollY": "480px",
             "orderMulti": true,
             "header": "#liaison_header",
             "initComplete": initComplete,
             "drawCallback": fnDrawCallBack,
-            "rowGroup": rowGroup,
-            "rowsGroup": rowsGroup,
+            //"rowGroup": rowGroup,
+            //"rowsGroup": rowsGroup,
             
         };
         if (order) {