angular

angular.json

@@ -23,6 +23,9 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/ngx-toastr/toastr.css",
               "src/styles.css"
             ],
             "scripts": []

package-lock.json

@@ -124,9 +124,9 @@
       }
     },
     "@angular/animations": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.0.4.tgz",
-      "integrity": "sha512-QfFikT0FzYNMjdVg0LWTBijdu9JDJyzejnhCFlXxv+KR4zolpRK98/rU7CFW1Fg2jjL3/yL9PT1sf5I0fTJZYA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.0.tgz",
+      "integrity": "sha512-xi832o3YN+eYSV4PDRllc8JwkH4aKPlb7NZ0UaqchOmz9/jQcykCEMZDzQAZUgHG1ohay6JBVaV8/zNcbSsRCA==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -556,6 +556,22 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/tsc-wrapped": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-0.4.2.tgz",
+      "integrity": "sha1-AH4ZiPVykqDJ172ORYn+ROVz8Hw=",
+      "requires": {
+        "tsickle": "^0.2"
+      }
+    },
+    "@auth0/angular-jwt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-2.1.0.tgz",
+      "integrity": "sha512-1KFtqswmJeM8JiniagSenpwHKTf9l+W+TmfsWV+x9SoZIShc6YmBsZDxd+oruZJL7MbJlxIJ3SQs7Yl1wraQdg==",
+      "requires": {
+        "url": "^0.11.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
@@ -716,6 +732,14 @@
         }
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.0.0.tgz",
+      "integrity": "sha512-jWVHRDUYppOSvzclP9d3lVWGUO+y0X9W6jdfyYehDkJCY0MFgtwefLYMtQ/NJ4niPzm2d/zZn+Bte48iIn0nKw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.0.6.tgz",
@@ -769,6 +793,11 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jwt-decode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-2.2.1.tgz",
+      "integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A=="
+    },
     "@types/node": {
       "version": "8.9.5",
       "resolved": "http://registry.npmjs.org/@types/node/-/node-8.9.5.tgz",
@@ -781,6 +810,11 @@
       "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=",
       "dev": true
     },
+    "@types/quill": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.3.tgz",
+      "integrity": "sha512-QngAyrmDusY3Jg3SwUWDMPPSE7HbErJTTj1K6fMkKkopUyp/JWuATyb2/wK7RaFJ886oSR6s6vjsL/fRAV7Xyw=="
+    },
     "@types/selenium-webdriver": {
       "version": "3.0.13",
       "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.13.tgz",
@@ -1052,12 +1086,92 @@
       "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
       "dev": true
     },
+    "alife-file-to-base64": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/alife-file-to-base64/-/alife-file-to-base64-0.0.2.tgz",
+      "integrity": "sha512-KJ57I1a+Q5Qjul7vUd13wnP8d0cPVqUJ099ZMsr8gvAW2I1ozxsfqEGGphw5VO9joSj0zBCb0dS51ZZl7D36kg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.5.tgz",
+      "integrity": "sha512-760183yxtGzni740IBTieNuWLtPNAoMqvmC0Z62UoU0I3nqk+VJuO3JbQAXOyvo3Oy/ZsdNQwrSTh/B0OQZjNw=="
+    },
+    "angular-calendar": {
+      "version": "0.26.4",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.26.4.tgz",
+      "integrity": "sha512-Bb1ZVE3N6moXCOOYJar1nF+ZqSdVX05HkgmnG/gRImjPsUxXnWnE2BjIjzzgQalE5LinbG2GPYNk8AhE1kah3Q==",
+      "requires": {
+        "angular-draggable-droppable": "^4.0.2",
+        "angular-resizable-element": "^3.2.2",
+        "calendar-utils": "^0.2.2",
+        "positioning": "^1.4.0",
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-draggable-droppable": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.0.2.tgz",
+      "integrity": "sha512-Ch0YARWRraXy61UOdgNKvjkCbUcSgIATHtR2Yb31MHdia5y1bdrs+2UvIBUx5nIQOLIJBvPb0SEnEFZJgvEMJA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-font-awesome": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz",
+      "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk="
+    },
+    "angular-resizable-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.2.tgz",
+      "integrity": "sha512-Lf3jnZMdndAdasAXRImpmFMe+I596rY2ttMPmWMW9zIp2QeyriNbr8l3VEfUJWnCW14oNsO8SHRAYUXBphm/Lw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular-router-loader": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/angular-router-loader/-/angular-router-loader-0.4.0.tgz",
+      "integrity": "sha1-BiZtTzFLABYZcPjiSvMcsMoH3Ls=",
+      "requires": {
+        "loader-utils": "^0.2.15"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "requires": {
+            "big.js": "^3.1.3",
+            "emojis-list": "^2.0.0",
+            "json5": "^0.5.0",
+            "object-assign": "^4.0.1"
+          }
+        }
+      }
+    },
+    "angular2-collapsible": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/angular2-collapsible/-/angular2-collapsible-0.6.1.tgz",
+      "integrity": "sha512-MWWD2qmZjs6oJYd8XBr0IAMDAHhmZfJbPz5tvxhCkTNVFRimLLLfzp+4K9U/Lc2FwtioKWob5/nZX8wWJVzD8g==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "angular2-jwt": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/angular2-jwt/-/angular2-jwt-0.2.3.tgz",
+      "integrity": "sha1-VO/do87tuoX2o3sWXyKsIrit8CE="
+    },
     "ansi-colors": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.1.tgz",
@@ -1579,8 +1693,7 @@
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
-      "dev": true
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
     },
     "binary-extensions": {
       "version": "1.12.0",
@@ -1665,6 +1778,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1914,6 +2032,11 @@
         "unset-value": "^1.0.0"
       }
     },
+    "calendar-utils": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.2.3.tgz",
+      "integrity": "sha512-wXxvJX/fdVZqrHeyxEWq5kbwALXrjifbY2L3fXvuS815cCwoWv+Uuiu0jkfqZNTtOSKaTXHdMkIhmLRqcC0E5g=="
+    },
     "callsite": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
@@ -2100,8 +2223,7 @@
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
-      "dev": true
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
     },
     "clone-deep": {
       "version": "2.0.2",
@@ -2547,6 +2669,14 @@
       "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
       "dev": true
     },
+    "cuppa-ng2-slidemenu": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cuppa-ng2-slidemenu/-/cuppa-ng2-slidemenu-2.0.0.tgz",
+      "integrity": "sha1-S62Hzq1N0L/FNKxCT32rOF+EdFs=",
+      "requires": {
+        "font-awesome": "*"
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2577,6 +2707,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "date-format": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-1.2.0.tgz",
@@ -2613,8 +2748,7 @@
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-      "dev": true
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
     },
     "deep-is": {
       "version": "0.1.3",
@@ -2852,6 +2986,11 @@
         "void-elements": "^2.0.0"
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -2910,8 +3049,7 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-      "dev": true
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -3394,8 +3532,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -3517,6 +3654,11 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
@@ -3673,6 +3815,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4434,6 +4581,22 @@
         }
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -4633,6 +4796,11 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hijri-js": {
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/hijri-js/-/hijri-js-1.0.25.tgz",
+      "integrity": "sha1-UUXXoUcZSq5apRYpOimmo5x2pOk="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5685,8 +5853,7 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-      "dev": true
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
     },
     "jsprim": {
       "version": "1.4.1",
@@ -5753,6 +5920,11 @@
         }
       }
     },
+    "jwt-decode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
+      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
+    },
     "karma": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/karma/-/karma-3.0.0.tgz",
@@ -6143,6 +6315,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "materialize-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
+      "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw=="
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
@@ -6286,6 +6463,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz",
@@ -6321,8 +6506,7 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "mississippi": {
       "version": "2.0.0",
@@ -6385,11 +6569,23 @@
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz",
+      "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA=="
+    },
+    "moment-hijri": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/moment-hijri/-/moment-hijri-2.1.1.tgz",
+      "integrity": "sha512-HS0PoqjssKfVwjIIbcjXdS9kqH/Jlu3j6NG1WqyyKPmThFyUSnfCF3ri9wWWEZSTvnT4R6R3C/9kw9cdnJnbFw==",
+      "requires": {
+        "moment": "^2.22.1"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -6470,6 +6666,170 @@
       "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
       "dev": true
     },
+    "ng-hijri-gregorian-datepicker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ng-hijri-gregorian-datepicker/-/ng-hijri-gregorian-datepicker-1.0.0.tgz",
+      "integrity": "sha512-OEYHQHLOUrnD2jT92zPcdFvZo/PIbwTv0Xl1MSmtAkoDovDciVivvtig1BRb+N0G+sjOfiWRwA9m8JgBEgKpng==",
+      "requires": {
+        "angular": "^1.4.5",
+        "bootstrap": "^4.1.3",
+        "moment": "^2.10.6",
+        "moment-hijri": "^2.1.1"
+      }
+    },
+    "ng-sidebar": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ng-sidebar/-/ng-sidebar-8.0.0.tgz",
+      "integrity": "sha512-+uCduUkcsOerb8MjecrPcP1KY8gKyd8XVBB+8jRao/JCz/qBwD9E2GPRGLL+NzwU72coYhL8L4UvhZwwIpl1rA=="
+    },
+    "ng-simple-slideshow": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/ng-simple-slideshow/-/ng-simple-slideshow-1.2.6.tgz",
+      "integrity": "sha512-XL3JZryBqFUUrdzKfyE2A31aWyslTYAvxZNfntJdwVgCftM6PpI8CgLXoiSHtxRJYuH3kTzdNTYw2bJVUkesQQ=="
+    },
+    "ng2-opd-popup": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/ng2-opd-popup/-/ng2-opd-popup-1.1.21.tgz",
+      "integrity": "sha1-qOxFQq5E6KAR2cMDjtaLGb86VfM=",
+      "requires": {
+        "@angular/common": "2.3.0",
+        "@angular/compiler": "2.2.4",
+        "@angular/compiler-cli": "2.3.0",
+        "@angular/core": "2.3.0",
+        "@angular/forms": "2.3.0",
+        "@angular/http": "2.3.0",
+        "@angular/platform-browser": "2.3.0",
+        "@angular/platform-browser-dynamic": "2.3.0",
+        "@angular/router": "3.2.4",
+        "angular-router-loader": "^0.4.0",
+        "core-js": "^2.4.1",
+        "reflect-metadata": "^0.1.3",
+        "rxjs": "5.0.0-rc.4",
+        "zone.js": "^0.7.2"
+      },
+      "dependencies": {
+        "@angular/common": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/common/-/common-2.3.0.tgz",
+          "integrity": "sha1-FrADT+Q65wh1ND8j4Zg1Q17dEY4="
+        },
+        "@angular/compiler": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-2.2.4.tgz",
+          "integrity": "sha1-QOjbX4AZOd3BoWMHnccbO+gaBq4="
+        },
+        "@angular/compiler-cli": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-2.3.0.tgz",
+          "integrity": "sha1-2fAXHEbZ1j4aFzekzPD7/mwyFmY=",
+          "requires": {
+            "@angular/tsc-wrapped": "0.4.2",
+            "minimist": "^1.2.0",
+            "reflect-metadata": "^0.1.2"
+          }
+        },
+        "@angular/core": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/core/-/core-2.3.0.tgz",
+          "integrity": "sha1-5gvTmFhNaUZ9B10AG3GDZBdKJTQ="
+        },
+        "@angular/forms": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-2.3.0.tgz",
+          "integrity": "sha1-lhEzIts2L6GkyXmJKf/eDnbgNNw="
+        },
+        "@angular/http": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/http/-/http-2.3.0.tgz",
+          "integrity": "sha1-DAgj1pcj2W0pTliIE5f+we2AP3M="
+        },
+        "@angular/platform-browser": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-2.3.0.tgz",
+          "integrity": "sha1-kyWTCc+06P2zns7KCyBfTK8ALmw="
+        },
+        "@angular/platform-browser-dynamic": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.3.0.tgz",
+          "integrity": "sha1-6BjT/HPMkjIwiRrKtrgCu939/zs="
+        },
+        "@angular/router": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/router/-/router-3.2.4.tgz",
+          "integrity": "sha1-3+xxrQcuwDE2S6XQi9b+A/1b6tw="
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        },
+        "rxjs": {
+          "version": "5.0.0-rc.4",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.0-rc.4.tgz",
+          "integrity": "sha1-pNCLxdfzDUjtcTDimVSQwyajJcQ=",
+          "requires": {
+            "symbol-observable": "^1.0.1"
+          }
+        },
+        "zone.js": {
+          "version": "0.7.8",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.7.8.tgz",
+          "integrity": "sha1-Tz/og01EWX8mOQU6D6Q43zT//e0="
+        }
+      }
+    },
+    "ng2-toastr": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/ng2-toastr/-/ng2-toastr-4.1.2.tgz",
+      "integrity": "sha1-G0UvBxOZYcOPhmxuJKBiR++iGxE="
+    },
+    "ngx-hijri-lib": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/ngx-hijri-lib/-/ngx-hijri-lib-1.0.6.tgz",
+      "integrity": "sha512-zmrNj16BGztrimwLW8/jSztz/dEPxTlJ/8liR/RU2qtebpvp1rZsxzT4sUY4Xe1UC3OAvzZN1jqUgAY6/NVofg==",
+      "requires": {
+        "global": "^4.3.2",
+        "hijri-js": "^1.0.25"
+      }
+    },
+    "ngx-moment": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/ngx-moment/-/ngx-moment-3.3.0.tgz",
+      "integrity": "sha512-6fpllpJqLfjRWboOhphgeEYt+rzIA9O29rG5QWCebRt2X0uNk4P93sLEb0S8lbDF0dEp2NOC3UOD+xoCVlJQhA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "ngx-pagination": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.2.1.tgz",
+      "integrity": "sha512-+dprQkYoiNYDZkNAe/1HX0wDFbwCTE31mC2bEQVdI7ZbjEIvGB7R3zp5QoCKgz6cPFatUj4Iw6Ukqp5zx0oT/Q=="
+    },
+    "ngx-quill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-quill/-/ngx-quill-3.0.0.tgz",
+      "integrity": "sha512-u/MhcVPWs+NWZMueJOQQNI6G0FDChIyx5OhK51orHnGFoFsudwsGDMT07a5vJB2e8K4gTCAjT7E9zEcT1emCMQ==",
+      "requires": {
+        "@types/quill": "1.3.3",
+        "quill": "^1.3.6"
+      }
+    },
+    "ngx-spinner": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-6.1.2.tgz",
+      "integrity": "sha512-j/R8T5vKvsLLib1pTxKLYK3GYAFXw5VoUJmaTlcocO6Yi4qIypfhmw9PX9triy7hWVGPu6cUzVs7g9cEG9OYBA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "ngx-toastr": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-9.1.1.tgz",
+      "integrity": "sha512-v43BmIXPmwMRx9Uv0ru2UaPQLA14gTsqWgXrO1DKC8RXnBGGoQEE48cVCaDX1GhaGM5GSzVO2s0o+nb688zsFw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -6825,8 +7185,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-component": {
       "version": "0.0.3",
@@ -7096,6 +7455,11 @@
         "readable-stream": "^2.1.5"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parse-asn1": {
       "version": "5.1.1",
       "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
@@ -7300,6 +7664,11 @@
         "mkdirp": "0.5.x"
       }
     },
+    "positioning": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-1.4.0.tgz",
+      "integrity": "sha512-LbN+mgAXtcDdN46xMJ3yZwjndqqYJODaO5qKmU+MVMu5tL3K2dlm1Qha/zh1k2JAFym5HDaZpnPfO4gr91VTRw=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -7627,8 +7996,7 @@
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
     },
     "querystring-es3": {
       "version": "0.2.1",
@@ -7642,6 +8010,36 @@
       "integrity": "sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.1",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -7831,8 +8229,7 @@
     "reflect-metadata": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
-      "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==",
-      "dev": true
+      "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A=="
     },
     "regenerate": {
       "version": "1.4.0",
@@ -8078,6 +8475,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "rxjs-compat": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.3.3.tgz",
+      "integrity": "sha512-caGN7ixiabHpOofginKEquuHk7GgaCrC7UpUQ9ZqGp80tMc68msadOeP/2AKy2R4YJsT1+TX5GZCtxO82qWkyA=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -9092,8 +9494,7 @@
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "dev": true
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
     "tapable": {
       "version": "1.1.0",
@@ -9449,6 +9850,37 @@
         }
       }
     },
+    "tsickle": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.2.6.tgz",
+      "integrity": "sha1-rUq/kudOvfP7WqGHyoWwIGb+Ghs=",
+      "requires": {
+        "minimist": "^1.2.0",
+        "mkdirp": "^0.5.1",
+        "source-map": "^0.5.6",
+        "source-map-support": "^0.4.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "source-map-support": {
+          "version": "0.4.18",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
+          "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+          "requires": {
+            "source-map": "^0.5.6"
+          }
+        }
+      }
+    },
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
@@ -9746,7 +10178,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
       "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
       "requires": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
@@ -9755,8 +10186,7 @@
         "punycode": {
           "version": "1.3.2",
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
         }
       }
     },

package.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.0.0",
+    "@angular/animations": "^7.2.0",
     "@angular/common": "~7.0.0",
     "@angular/compiler": "~7.0.0",
     "@angular/core": "~7.0.0",
@@ -20,8 +20,36 @@
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
+    "@auth0/angular-jwt": "^2.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
+    "@types/jwt-decode": "^2.2.1",
+    "alife-file-to-base64": "0.0.2",
+    "angular-calendar": "^0.26.4",
+    "angular-font-awesome": "^3.1.2",
+    "angular2-collapsible": "^0.6.1",
+    "angular2-jwt": "^0.2.3",
+    "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
+    "cuppa-ng2-slidemenu": "^2.0.0",
+    "date-fns": "^1.30.1",
+    "font-awesome": "^4.7.0",
+    "jwt-decode": "^2.2.0",
+    "materialize-css": "^1.0.0",
+    "moment": "^2.23.0",
+    "moment-hijri": "^2.1.1",
+    "ng-hijri-gregorian-datepicker": "^1.0.0",
+    "ng-sidebar": "^8.0.0",
+    "ng-simple-slideshow": "^1.2.6",
+    "ng2-opd-popup": "^1.1.21",
+    "ng2-toastr": "^4.1.2",
+    "ngx-hijri-lib": "^1.0.6",
+    "ngx-moment": "^3.3.0",
+    "ngx-pagination": "^3.2.1",
+    "ngx-quill": "^3.0.0",
+    "ngx-spinner": "^6.1.2",
+    "ngx-toastr": "^9.1.1",
     "rxjs": "~6.3.3",
+    "rxjs-compat": "^6.3.3",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

src/app/Internal-Page/hospital-content/hospital-content.component.css

@@ -0,0 +1,44 @@
+.hospitalContent-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.sideMenu-w {
+    width: 100%;
+    display: inline-block;
+    padding: 10px;
+}
+
+.sideMenu-w li {
+    text-align: right;
+    background-color: #dac4a6;
+    padding: 10px 20px;
+    color: #fff;
+    font-size: 17px;
+    font-weight: bold;
+    border-bottom: 1px solid #fff;
+}
+
+.information {
+    width: 100%;
+    padding: 20px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px 0;
+    margin: 10px 0;
+}
+
+.active {
+    background-color: #03887f;
+    color: #fff;
+    border-bottom: 1px solid #03887f;
+}
+
+.collapseStyle {
+    text-align: right;
+}
+
+.collapseHeader-w{
+    background-color: #dac4a6;
+    border-bottom: 1px solid #dac4a6;
+}

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -0,0 +1,28 @@
+<div class="hospitalContent-w">
+  <div class="container">
+    <div class="row">
+      <div class="col-6 col-md-4">
+        <!-- <ul class="list-unstyled sideMenu-w">
+          <li *ngFor="let hospital of hospitalCenters" [ngClass]="hospital.active == 0 ? '' : 'active'" (click)="getInformationData(hospital)">{{hospital.name}}</li>
+        </ul> -->
+        <collapsible-list [type]="'accordion'" class="collapseStyle">
+          <collapsible-list-item *ngFor="let hospital of hospitalCenters">
+              <collapsible-header class="waves-effect" [ngClass]="hospital.active == 0 ? '' : 'collapseHeader-w'" (click)="getInformationData(hospital)">
+                {{hospital.name}}
+              </collapsible-header>
+              <collapsible-body [expanded]="false">
+                <p *ngFor="let field of hospital['fields']">{{field.title}}</p>
+              </collapsible-body>
+          </collapsible-list-item> 
+        </collapsible-list>
+      </div>
+      <div class="col-6 col-md-8">
+        <div class="information">
+
+        </div>
+      </div> 
+      <!---->
+    </div>
+  </div>
+ 
+</div>

src/app/Internal-Page/hospital-content/hospital-content.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { InternalPageService } from '../../shared/internal-page.service';
+
+@Component({
+  selector: 'app-hospital-content',
+  templateUrl: './hospital-content.component.html',
+  styleUrls: ['./hospital-content.component.css']
+})
+export class HospitalContentComponent implements OnInit {
+
+  constructor(private internalService: InternalPageService) { }
+
+  hospitalCenters = [];
+
+  ngOnInit() {
+
+    this.internalService.getHospitalCenterList().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.hospitalCenters = responce['hospitals_centers'];
+        console.log(this.hospitalCenters);
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  getInformationData(data) {
+    for(let i = 0; i < this.hospitalCenters.length; i++) {
+      if(data.id == this.hospitalCenters[i].id) {
+        this.hospitalCenters[i].id = 1;
+        alert(this.hospitalCenters[i].id);
+      } else{
+        this.hospitalCenters[i].id = 0;
+      }
+    }
+  }
+
+}

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -0,0 +1,699 @@
+input,button {
+    outline: none;
+}
+
+.internalPage-w {
+    width: 100%;
+    padding-bottom: 30px;
+}
+
+.internalPage-w .internalHeader-w {
+    width: 100%;
+    height: 60px;
+    background-color: #e3dfdf;
+
+    /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
+    background-size: cover; */
+}
+
+.internalPage-w .internalHeader-w .notificationList-w {
+    width: 100%;
+    display: inline-block;
+    text-align: right;
+}
+
+.internalPage-w .internalHeader-w .login  {
+    margin-top: 13px;
+    color: #00a99d;
+    cursor: pointer;
+    text-align: right;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li {
+    display: inline-block; 
+    margin: 0 10px;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li span {
+    color: #00a99d;
+    font-size: 25px;
+    cursor: pointer;
+    transition: all 0.5s;
+    margin-top: 5px;
+    display: block;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li span:hover i {
+    color: #08726a;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .btn-outline-success {
+    border: none;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .buttonW:hover {
+    background-color: transparent;
+}
+
+.internalPage-w .internalHeader-w input[type='text'] {
+    background-color: #fff;
+    border: none;
+    color: #ccc;
+    padding: 5px;
+}
+
+.internalPage-w .internalHeader-w .searchBtn {
+    background-color: #fff;
+    border: none;
+    padding: 5px 10px;
+    margin:  0 5px;
+}
+
+.profileData-w img {
+    width: 35px;
+    height: 35px;
+    border: 1px solid #252525;
+    margin: 0 5px;
+}
+
+.buttonW {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    outline: none;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;
+}
+
+.dateW {
+    color: #fff;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;  
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
+    margin: -1px 10px;
+}
+
+.logoHeader-w {
+    width: 100%;
+    height: 160px;
+    display: inline-block;
+    background: url('../../../assets/image/bottomBackground.jpg');
+    background-size: cover;
+}
+
+.logoHeader-w .rightLogo-w,
+.logoHeader-w .leftLogo-w,
+.logoHeader-w .center {
+    width: 100%;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.logoHeader-w .rightLogo-w {
+    text-align: right;
+}
+
+.logoHeader-w .rightLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .leftLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .center h2 {
+    font-size: 30px;
+    color: #bda380;
+    margin-top: 20px;
+}
+
+.logoHeader-w .center p {
+    font-size: 15px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: normal;
+    color: #00a99d;
+}
+
+.logoHeader-w .rightLogo-w img {
+    width: 210px;
+}
+
+.pagesHeader-w {
+    width: 100%;
+    background-color: #dac4a6;
+    margin-top: -6px;
+    position: relative;
+}
+
+.pagesHeader-w .dropdown-toggle:empty::after {
+    position: absolute;
+    top: 13px;
+}
+.pagesHeader-w .navbar {
+    /* overflow: hidden; */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem 1rem;
+}
+
+.pagesHeader-w navbar a {
+    float: left;
+    font-size: 16px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+}
+
+.pagesHeader-w .dropdown {
+    float: left;
+    /* overflow: hidden; */
+}
+
+.pagesHeader-w .dropdown .dropbtn,
+.pagesHeader-w .dropdown .dropbtn a {
+    font-size: 20px;
+    border: none;
+    outline: none;
+    color: #03887f;
+    padding: 14px 16px;
+    background-color: inherit;
+    font: inherit;
+    margin: 0;
+    font-weight: bold;
+}
+
+.pagesHeader-w .navbar a:hover, .dropdown:hover .dropbtn {
+}
+
+.pagesHeader-w .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #bea380;
+    border-radius: 10px;
+    width: 100%;
+    left: 0;
+    top: 44px;
+    padding: 10px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+
+
+.pagesHeader-w .dropdown-content ul li a {
+    color: #fff;
+}
+
+.pagesHeader-w .dropdown-content .header {
+    padding: 16px;
+    color: white;
+}
+
+.pagesHeader-w .dropdown:hover .dropdown-content {
+    background: yello;
+    display: block;
+}
+
+/* Create three equal columns that floats next to each other */
+.pagesHeader-w .column {
+    float: left;
+    width: 50%;
+    padding: 10px;
+    background-color: #ccc;
+    height: 250px;
+}
+
+.pagesHeader-w .column a {
+    float: none;
+    color: black;
+    padding: 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.pagesHeader-w .column a:hover {
+    background-color: #ddd;
+}
+
+/* Clear floats after the columns */
+.pagesHeader-w .row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.navbar {
+    width: 100%;
+}
+
+.hyperLink {
+    color: #fff;
+    text-decoration: none;
+}
+
+.servicesContent-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.carousel-control-next, .carousel-control-prev{
+    cursor: pointer !important;
+}
+
+.slider {
+    width: 100%;
+    height: 500px;
+}
+
+.slider img {
+    width: 100%;
+    height: 500px;
+}
+
+.servicesContent-w .serviceItem-w {
+    width: 100%;
+    height: 150px;
+    padding: 20px 10px;
+    margin: 10px 0;
+    color: #fff;
+    text-align: center;
+    background: radial-gradient(#e5e5e5, #bda380);
+    border-radius: 10px;
+    border-bottom: 4px solid #00a99d;
+    transition: all 0.5s;
+}
+
+.servicesContent-w .serviceItem-w:hover {
+    border-bottom: 4px solid #efe1ce;
+}
+
+.servicesContent-w .serviceItem-w img {
+    width: 50px;
+    height: 50px;
+}
+
+.servicesContent-w .serviceItem-w p {
+    margin-top: 16px;
+}
+
+.servicesContent-w .serviceItem-w a {
+    color: #fff;
+    transform: all 0.5s;
+    margin-top: 15px;
+    font-weight: bold;
+}
+
+.servicesContent-w .serviceItem-w a:hover{
+    color: #00a99d;
+}
+
+.eventPart-w {
+    width: 100%;
+    height: 80px;
+}
+
+.eventPart-w .event {
+    width: 100%;
+    height: 50px;
+    background-color: #f3f0f0;
+    border-radius: 10px;
+}
+
+.eventPart-w .event .now{
+    padding: 5px 0;
+    color: red;
+}
+
+.eventPart-w .event .now img{
+    width: 60px;
+    height: 40px;
+}
+
+.eventPart-w .event .now span{
+    color: #888;
+    padding: 0 10px;
+}
+
+.eventPart-w .event .next{
+    color: green;
+    padding: 10px 0;
+}
+
+.eventPart-w .event .next img{
+    width: 30px;
+    height: 30px;
+}
+
+.eventPart-w .event .next span {
+    color: #888;
+    padding: 0 10px;
+}
+.contentsData-w {
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w,
+.contentsData-w .joinUsEn-w{
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w .joinHeader-w,
+.contentsData-w .joinUsEn-w .joinHeader-w {
+    width: 100%;
+    height: 42px;
+    padding: 10px 0;
+    text-align: center;
+    font-size: 17px;
+    color: #fff;
+    background-color: #bda380;
+}
+
+.contentsData-w .joinUs-w .joinHeading-w,
+.contentsData-w .joinUsEn-w .joinHeading-w {
+    width: 100%;
+    height: 50px;
+    color: #00a99d;
+    text-shadow: 0px 0px 1px;
+    background-color: #f7f7f7;
+    box-shadow: 1px 1px 6px #2525;
+}
+
+.contentsData-w .joinUs-w .joinHeading-w h2,
+.contentsData-w .joinUsEn-w .joinHeading-w h2 {
+    font-size: 18px;
+    padding: 10px 0;
+    text-align: center;
+}
+
+.contentsData-w .joinUs-w .dataContent,
+.contentsData-w .joinUsEn-w .dataContent {
+    width: 100%;
+    padding: 30px 15px;
+    height: 200px;
+    margin-top: 2px;
+    box-shadow: 0 2px 6px #ccc;
+}
+
+.contentsData-w .joinUs-w .dataContent .joinUs-photo,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo {
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w .dataContent .joinUs-photo img,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo img {
+    width: 100%;
+    height: 100px;
+    margin: 0 5px;
+    border: 1px solid #ccc;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w {
+    width: 100%;
+    text-align: right;
+}
+
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w {
+    width: 100%;
+    text-align: left;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w  p,
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+    font-size: 14px;
+    font-weight: bold;
+    color: #bda380;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w  p span,
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+    color: #bda380;
+    margin: 0 10px;
+}
+
+.sharingEvent-w {
+    width: 100%;
+    display: inline-block;
+}
+.sharingEvent-w .sharingHeader-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #bda380;
+}
+
+.sharingEvent-w .sharingHeader-w h2 {
+    font-size: 18px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    color: #fff;
+}
+.sharingEvent-w .congeratolation,
+.sharingEvent-w .sadDead-w  {
+    width: 100%;
+    display: inline-block;
+    box-shadow: 0 0 7px #ccc;
+}
+
+.sharingEvent-w .congeratolation h2,
+.sharingEvent-w .sadDead-w h2 {
+    margin: 0;
+    padding: 15px 0;
+    text-align: center;
+    background-color: #f7f7f7;
+    font-size: 18px;
+    color: #03b0b3;
+    text-shadow: 0 0 1px;
+}
+.sharingEvent-w .content,
+.sharingEvent-w .content{
+    width: 100%;
+    height: 200px;
+    background-color: #fff;
+    box-shadow: 0 2px 6px #ccc;
+    text-align: center;
+    padding: 30px 0;
+}
+
+.sharingEvent-w .content p,
+.sharingEvent-w .content p {
+    color: #bda380;
+    font-weight: bold;
+}
+
+.sharingEvent-w .content p span,
+.sharingEvent-w .content p span {
+    color: #bda380;
+    font-weight: bold;
+}
+
+.sharingEvent-w .content .event {
+    color: #00a99d;
+}
+
+.secondServices-w {
+    width: 100%;
+    padding: 40px 0;
+    display: inline-block;
+}
+
+.secondServices-w .contentSecondSer-w {
+    width: 100%;
+    display: inline-block;
+    margin: 10px 0;
+}
+
+.secondServices-w .contentSecondSer-w .headerSer-w {
+    width: 100%;
+    padding: 13px 0;
+    background-color: #bda380;
+    text-align: center;
+    color: #fff;
+}
+
+.secondServices-w .contentSecondSer-w .titleSer-w {
+    width: 100%;
+    padding: 13px 0;
+    background-color: #f7f7f7;
+    box-shadow: 0 0 6px #ccc;
+    text-align: center;
+    color: #08726a;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer {
+    width: 100%;
+    height: 200px;;
+    background-color: #fff;
+    box-shadow: 0 0 1px #ccc;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w img{
+    width: 30px;
+    height: 30px;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w p{
+    text-align: center;
+    font-size: 12px;
+}
+
+.tabs {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+}
+
+.tabs .lastTab-w {
+    width: 100%;
+}
+
+.tabs .lastTab-w .headerTab-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #bda380;
+    text-align: center;
+    color: #fff;
+}
+
+.tabs .lastTab-w .menuTab-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #f1f1f1;
+}
+
+.tabs .lastTab-w .menuTab-w ul {
+    width: 100%;
+    display: inline-block;
+    padding: 5px 0;
+    text-align: center;
+}
+
+.tabs .lastTab-w .menuTab-w ul li {
+    display: inline-block;
+    margin: 0 10px;
+    padding: 0 10px;
+    border-left: 1px solid #bda380;
+    cursor: pointer;
+    color: #03b0b3;
+    text-shadow: 0 0 1px;
+}
+
+.tabs .lastTab-w .menuTabContent-w {
+    width: 100%;
+    display: inline-block;
+    height: 200px;
+    box-shadow: 0 0 6px #ccc;
+}
+
+.tabs .lastTab-w .menuTabContent-w h2 {
+    font-size: 18px;
+    padding: 20px 0;
+}
+
+.tabs .lastTab-w .menuTabContent-w ol {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tabs .lastTab-w .menuTabContent-w ol li {
+    text-align: right;
+    margin: 0 20px;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+}
+
+.tabs .lastTab-w .menuTab-w ul li:last-child{
+    border-left: none;
+}
+
+.tabs .recods {
+    width: 100%;
+    display: inline-block;
+}
+
+.tabs .recods .headerRecords-w {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background-color: #bda380;
+    color: #fff;
+    text-align: center;
+}
+
+.tabs .recods .recordsContent-w {
+    width: 100%;
+    display: inline-block;
+    box-shadow: 0 0 6px #ccc;
+} 
+
+.tabs .recods .recordsContent-w ol {
+    width: 100%;
+    text-align: right;
+    padding: 0 30px;
+}
+
+.tabs .recods .recordsContent-w ol li {
+    font-size: 15px;
+    padding: 0 10px;
+    margin: 15px 0;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 13px;
+}
+
+.tabs .recods .recordsContent-w ol li .collapse {
+    width: 100%;
+    display: inline-block;
+    background-clip: #f7f7f7;
+    box-shadow: 0 0 6px #ccc;
+    padding: 5px;
+}
+
+.tabs .recods .recordsContent-w ol li .collapse p {
+    font-size: 16px;
+}
+
+
+@media(max-width:768px) {
+    .backgroundXS {
+        background-color: red;
+    }
+}
+
+
+/* english estyle  */
+
+.menuEnglish{
+    text-align: left;
+}
+
+.achievementsLang-w {
+    text-align: left;
+    direction: ltr;
+}
+
+.achievementsLang-w li {
+    text-align: left !important;
+}
+
+
+.activeLanguage {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+
+
+
+

src/app/Internal-Page/internal-page-content/internal-page-content.component.html

@@ -0,0 +1,381 @@
+
+
+    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
+                <div class="servicesContent-w">
+                    <div class="container">
+                        <div class="row">
+                            
+                            <div class="col-12 col-md-4">
+                                <div class="row">
+                                    <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+                                        <div class="serviceItem-w">
+                                            <a href="{{service.link}}" target="_blank">
+                                                <img src="{{authSer.pathImg + service.photo}}" />
+                                                <p>{{service.name}}</p>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+            
+                            <div class="col-12 col-md-8">
+                                <div class="slider">
+                                    <ngb-carousel>
+                                        <ng-template *ngFor="let report of reportsData" ngbSlide>
+                                            <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
+                                            <div class="carousel-caption">
+                                            <p>{{report.description}}</p>
+                                            </div>
+                                        </ng-template>
+                                    </ngb-carousel>
+                                </div>
+                            </div>
+            
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="eventPart-w hide">
+                    <div class="container">
+                        <div class="event">
+                            <div class="row">
+                                <div class="col-12 col-sm-12 ol-md-4">
+                                </div>
+                                <div class="col-12 col-sm-12 col-md-4">
+                                    <p class="now"> <img src="../../../assets/image/live.png" />  يعرض الأن :<span>{{live_event.name ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
+                                </div>
+                                <div class="col-12 col-sm-12 col-md-4">
+                                    <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture.name ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="contentsData-w">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-12 col-sm-12 col-md-4">
+                                <div class="joinUs-w">
+                                    <div class="joinHeader-w">
+                                        إنضم إلينا
+                                    </div>
+                                    <div class="joinHeading-w">
+                                        <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
+                                    </div>
+                                    <div class="dataContent">
+                                        <div class="row">
+                                            <div class="col-12 col-md-4">
+                                                <div class="joinUs-photo">
+                                                    <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                                </div>
+                                            </div>
+                                            <div class="col-12 col-md-8">
+                                                <div class="profileData-w">
+                                                    <p>    الموظف :<span>{{joinUs.name}}</span></p>
+                                                    <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
+                                                    <p>   التاريخ :<span>{{joinUs.date}}</span></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                             </div>
+                             <div class="col-12 col-md-8">
+                                <div class="sharingEvent-w">
+                                    <div class="sharingHeader-w">
+                                        <h2>مشاركه اللحظات</h2>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-12 col-md-6">
+                                            <div class="congeratolation">
+                                                <h2>التهاني</h2>
+                                            </div>
+                                            <div class="content">
+                                                <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
+                                                <p class="event">{{congratulations.name}}</p>
+                                                <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md-6">
+                                            <div class="sadDead-w">
+                                                <h2>التعازي</h2>
+                                            </div>
+                                            <div class="content">
+                                                <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
+                                                <p class="event">{{condolences.name}}</p>
+                                                <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                             </div>
+                        </div>
+                       
+                    </div>
+                </div>
+            
+                <div class="secondServices-w">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+                                <div class="contentSecondSer-w">
+                                    <div class="headerSer-w">
+                                        {{ser.name}}
+                                    </div>
+                                    <div class="contentSer">
+                                        <div class="row">
+                                            <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
+                                                <div class="fieldData-w text-center">
+                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                                    <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="tabs">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-12 col-md-8">
+                                <div class="lastTab-w">
+                                    <div class="headerTab-w">
+                                        أخر التعاميم
+                                    </div>
+                                    <div class="menuTab-w">
+                                        <ul class="list-unstyled">
+                                            <li (click)="onGetData(0)">التعاميم الداخليه</li>
+                                            <li (click)="onGetData(1)">التعاميم الخارجيه</li>
+                                            <li (click)="onGetData(2)">السياسات</li>
+                                        </ul>
+                                    </div>
+                                    <div class="menuTabContent-w">
+                                        <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
+                                        <ol>
+                                            <li *ngFor="let data of tabsData">{{data.name}}</li>
+                                        </ol>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-md-4">
+                                <div class="recods">
+                                    <div class="headerRecords-w">
+                                        إحصائيات عامه - إنجازات
+                                    </div>
+                                    <div class="recordsContent-w">
+                                        <ol>
+                                            <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
+                                                <p>{{achiev.title}}</p>     
+                                                <div *ngIf="i == expandedIndex">  
+                                                    <div class="collapse">  
+                                                        <div>  
+                                                            <p>{{achiev.title}}</p>  
+                                                            <p>{{achiev.descripton}}</p>  
+                                                        </div>  
+                                                    </div>  
+                                                </div>                                  
+                                            </li>
+                                        </ol>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    </ng-template>
+
+
+    <ng-template #englishTemplate>
+        <div class="servicesContent-w">
+            <div class="container">
+                <div class="row">
+                    
+                    <div class="col-12 col-md-4">
+                        <div class="row">
+                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+                                <div class="serviceItem-w">
+                                    <a href="{{service.link}}" target="_blank">
+                                        <img src="{{authSer.pathImg + service.photo}}" />
+                                        <p>{{service.name_en}}</p>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="col-12 col-md-8">
+                        <div class="slider">
+                            <ngb-carousel>
+                                <ng-template *ngFor="let report of reportsData" ngbSlide>
+                                    <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
+                                    <div class="carousel-caption">
+                                    <p>{{report.description_en}}</p>
+                                    </div>
+                                </ng-template>
+                            </ngb-carousel>
+                        </div>
+                    </div>
+    
+                </div>
+            </div>
+        </div>
+    
+        <div class="eventPart-w hide">
+            <div class="container">
+                <div class="event">
+                    <div class="row">
+                        <div class="col-12 col-sm-12 ol-md-4">
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-4">
+                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event.name ? live_event.name : ' now event now '}}</span></p>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-4">
+                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture.name ? next_lecture.name : 'now event now'}}</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div class="contentsData-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-sm-12 col-md-4">
+                        <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
+                            <div class="joinHeader-w">
+                                 Join Us
+                            </div>
+                            <div class="joinHeading-w">
+                                <h2>Welcome to join the medical center</h2>
+                            </div>
+                            <div class="dataContent">
+                                <div class="row">
+                                    <div class="col-12 col-md-4">
+                                        <div class="joinUs-photo">
+                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                        </div>
+                                    </div>
+                                    <div class="col-12 col-md-8">
+                                        <div class="profileData-w">
+                                            <p> Employee : <span>{{joinUs.name_en}}</span></p>
+                                            <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
+                                            <p> Date : <span>{{joinUs.date ? joinUs.date : 'not found'}}</span></p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                     </div>
+                     <div class="col-12 col-md-8">
+                        <div class="sharingEvent-w">
+                            <div class="sharingHeader-w">
+                                <h2>Share moments</h2>
+                            </div>
+                            <div class="row">
+                                <div class="col-12 col-md-6">
+                                    <div class="congeratolation">
+                                        <h2>Congratulations</h2>
+                                    </div>
+                                    <div class="content">
+                                        <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
+                                        <p class="event">{{congratulations.name_en}}</p>
+                                        <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-md-6">
+                                    <div class="sadDead-w">
+                                        <h2>Condolences</h2>
+                                    </div>
+                                    <div class="content">
+                                        <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
+                                        <p class="event">{{condolences.name_en}}</p>
+                                        <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                     </div>
+                </div>
+               
+            </div>
+        </div>
+    
+        <div class="secondServices-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
+                        <div class="contentSecondSer-w">
+                            <div class="headerSer-w">
+                                {{ser.name_en}}
+                            </div>
+                            <div class="contentSer">
+                                <div class="row">
+                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
+                                        <div class="fieldData-w text-center">
+                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                            <p>{{field.name_en ? field.name_en : 'Add Service'}}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div class="tabs">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-md-8">
+                        <div class="lastTab-w">
+                            <div class="headerTab-w">
+                                Latest Circulars
+                            </div>
+                            <div class="menuTab-w">
+                                <ul class="list-unstyled">
+                                    <li (click)="onGetData(0)"> Internal Circulars</li>
+                                    <li (click)="onGetData(1)">External Circulars</li>
+                                    <li (click)="onGetData(2)">Policies</li>
+                                </ul>
+                            </div>
+                            <div class="menuTabContent-w">
+                                <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
+                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                                    <li *ngFor="let data of tabsData">{{data.name_en}}</li>
+                                </ol>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-4">
+                        <div class="recods">
+                            <div class="headerRecords-w">
+                                General Statistics - Achievements
+                            </div>
+                            <div class="recordsContent-w">
+                                <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                                    <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">  
+                                        <p>{{achiev.title_en}}</p>     
+                                        <div *ngIf="i == expandedIndex">  
+                                            <div class="collapse">  
+                                                <div>  
+                                                    <p>{{achiev.title_en}}</p>  
+                                                    <p>{{achiev.descripton_en}}</p>  
+                                                </div>  
+                                            </div>  
+                                        </div>                                  
+                                    </li>
+                                </ol>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+

src/app/Internal-Page/internal-page-content/internal-page-content.component.ts

@@ -0,0 +1,236 @@
+import { UserService } from './../../shared/user.service';
+import { Router } from '@angular/router';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { InternalPageService } from '../../shared/internal-page.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-internal-page-content',
+  templateUrl: './internal-page-content.component.html',
+  styleUrls: ['./internal-page-content.component.css']
+})
+export class InternalPageContentComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private router:Router, 
+    private userservice: UserService, 
+    private internalService: InternalPageService,
+    private spinner: NgxSpinnerService,) { }
+
+    joinUs = [];
+    reportsData = [];
+    externalServices = [];
+    congratulations = [];
+    condolences = [];
+    internalServices = [];
+    tabsData = [];
+    achievements = [];
+    checkShowData: boolean;
+    tabtype:number = 0;
+    expandedIndex:number;
+    live_event = [];
+    next_lecture = [];
+    myInnerHeight = window.innerHeight;
+
+    
+    flag: boolean = false;
+  
+    catchEvent(event) {
+      this.flag = true
+      console.log(event)
+    }
+  
+    hide(event) {
+      this.flag = false;
+    }
+
+  ngOnInit() {
+
+    this.authSer.arabicTemplate = true;
+    this.authSer.arabicLanguage = true;
+    this.authSer.englishLanguage = false;
+    this.spinner.show();
+
+    //this.spinner.show();
+    this.authSer.showDashboardHeader = false;
+   //console.log(this.checkTokenExpire);
+       //get profile data
+    this.userservice.getUserDataProfile();
+    this.spinner.hide();
+    // this.internalService.getParentData().subscribe(
+    //   (responce) => {
+    //     this.parentsPage = responce['parents'];
+    //     console.log(this.parentsPage);
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    //get slider data
+    this.internalService.getSliderData().subscribe(
+      (responce) => {
+        console.log('responxce', responce);
+        this.reportsData = responce['reports'];
+      }, 
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get externals list 
+    this.internalService.getExternalServicesList().subscribe(
+      (responce) => {
+        console.log('external_list' , responce);
+        this.externalServices = responce['external_services'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get join us data 
+    this.internalService.getJoinUsData().subscribe(
+      (responce) => {
+        console.log('joooin us', responce);
+        this.joinUs = responce['user'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getCongatoration().subscribe(
+      (responce) => {
+        console.log('condddddd' ,responce['event']);
+        this.congratulations = responce['event'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getCondolences().subscribe(
+      (responce) => {
+        console.log('condddddd',responce['event']);
+        this.condolences = responce['event'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getInternalServicesList().subscribe(
+      (responce) => {
+        console.log('internal serviceees',responce);
+        this.internalServices = responce['internal_services'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getTabData(this.tabtype).subscribe(
+      (responce) => {
+        this.tabsData = responce['tabs'];
+        if(this.tabsData.length > 0) {
+          this.checkShowData = false;
+        } else {
+          this.checkShowData = true;
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getForthAchievementsList().subscribe(
+      (responce) => {
+        console.log('weeeeeeeeeeeeeeeeeeee', responce);
+        this.achievements = responce['achievements'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.internalService.getEventNow().subscribe(
+      (responce) => {
+        console.log( 'liiiiiiiiive', responce);
+        this.live_event = responce['live_lecture'];
+        this.next_lecture = responce['next_lecture'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+
+  }
+
+  // onLogin() {
+  //   this.router.navigate(['/login']);
+  // }
+
+  // onGetProfile() {
+  //   console.log('profile/'  + this.authSer.dataLoginUser['id']);
+  //   this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
+  // }
+
+  // //log out function
+  // onLogout() { 
+  //   localStorage.clear();
+  //   this.router.navigate(['login']);
+  // }
+
+  // onDashBoard() {
+  //   this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
+  // }
+
+  // getListPage(parent) {
+  //   for(let i = 0; i< this.parentsPage.length; i++) {
+  //     if(this.parentsPage[i].id == parent.id) {
+  //       this.parentsPage[i].active = 1;
+  //     } else if(this.parentsPage[0].id != parent.id) {
+  //       this.parentsPage[i].active = 0;
+  //     } else {
+  //      this.parentsPage[i].active = 0;
+  //     }
+  //   }
+  // };
+
+  onGetData(numberTab) {
+    this.spinner.show();
+    this.tabsData = [];
+    this.tabtype = numberTab;
+    this.internalService.getTabData(this.tabtype).subscribe(
+      (responce) => {
+        this.tabsData = responce['tabs'];
+        if(this.tabsData.length > 0) {
+          this.checkShowData = false;
+        } else {
+          this.checkShowData = true;
+        }
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  open(data,i) {
+    console.log(data);
+    this.expandedIndex = i;
+  }
+
+  closeCollapse(i) {
+    this.expandedIndex = -1;
+  }
+
+  goToHome() {
+    this.router.navigate(['InternalPage']);
+  }
+
+}

src/app/Internal-Page/internal-page-header/internal-page-header.component.css

@@ -0,0 +1,299 @@
+input,button {
+    outline: none;
+}
+
+.internalHeader-w {
+    width: 100%;
+    height: 60px;
+    background-color: #e3dfdf;
+
+    /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
+    background-size: cover; */
+}
+
+.internalHeader-w .notificationList-w {
+    width: 100%;
+    display: inline-block;
+    text-align: right;
+}
+
+.internalHeader-w .login  {
+    margin-top: 13px;
+    color: #00a99d;
+    cursor: pointer;
+    text-align: right;
+}
+
+.internalHeader-w .notificationList-w li {
+    display: inline-block; 
+    margin: 0 10px;
+}
+
+.internalHeader-w .notificationList-w li span {
+    color: #00a99d;
+    font-size: 25px;
+    cursor: pointer;
+    transition: all 0.5s;
+    margin-top: 5px;
+    display: block;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li span:hover i {
+    color: #08726a;
+}
+
+.internalHeader-w .notificationList-w .profileData-w .btn-outline-success {
+    border: none;
+}
+
+.internalHeader-w .notificationList-w .profileData-w .buttonW:hover {
+    background-color: transparent;
+}
+
+.internalHeader-w input[type='text'] {
+    background-color: #fff;
+    border: none;
+    color: #ccc;
+    padding: 5px;
+}
+
+.internalHeader-w .searchBtn {
+    background-color: #fff;
+    border: none;
+    padding: 5px 10px;
+    margin:  0 5px;
+}
+
+.profileData-w img {
+    width: 35px;
+    height: 35px;
+    border: 1px solid #252525;
+    margin: 0 5px;
+}
+
+.buttonW {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    outline: none;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;
+}
+
+.dateW {
+    color: #fff;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;  
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
+    margin: -1px 10px;
+}
+
+.logoHeader-w {
+    width: 100%;
+    height: 160px;
+    display: inline-block;
+    background: url('../../../assets/image/bottomBackground.jpg');
+    background-size: cover;
+}
+
+.logoHeader-w .rightLogo-w,
+.logoHeader-w .leftLogo-w,
+.logoHeader-w .center {
+    width: 100%;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.logoHeader-w .rightLogo-w {
+    text-align: right;
+}
+
+.logoHeader-w .rightLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .leftLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .center h2 {
+    font-size: 30px;
+    color: #bda380;
+    margin-top: 20px;
+}
+
+.logoHeader-w .center p {
+    font-size: 15px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: normal;
+    color: #00a99d;
+}
+
+.logoHeader-w .rightLogo-w img {
+    width: 210px;
+}
+
+.pagesHeader-w {
+    width: 100%;
+    background-color: #dac4a6;
+    margin-top: -6px;
+    position: relative;
+}
+
+.pagesHeader-w .dropdown-toggle:empty::after {
+    position: absolute;
+    top: 13px;
+}
+.pagesHeader-w .navbar {
+    /* overflow: hidden; */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem 1rem;
+}
+
+.pagesHeader-w navbar a {
+    float: left;
+    font-size: 16px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+}
+
+.pagesHeader-w .dropdown {
+    float: left;
+    /* overflow: hidden; */
+}
+
+.pagesHeader-w .dropdown .dropbtn,
+.pagesHeader-w .dropdown .dropbtn a {
+    font-size: 20px;
+    border: none;
+    outline: none;
+    color: #03887f;
+    padding: 14px 16px;
+    background-color: inherit;
+    font: inherit;
+    margin: 0;
+    font-weight: bold;
+}
+
+.pagesHeader-w .navbar a:hover, .dropdown:hover .dropbtn {
+}
+
+.pagesHeader-w .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #bea380;
+    border-radius: 10px;
+    width: 100%;
+    left: 0;
+    top: 44px;
+    padding: 10px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+
+
+.pagesHeader-w .dropdown-content ul li a {
+    color: #fff;
+}
+
+.pagesHeader-w .dropdown-content .header {
+    padding: 16px;
+    color: white;
+}
+
+.pagesHeader-w .dropdown:hover .dropdown-content {
+    background: yello;
+    display: block;
+}
+
+/* Create three equal columns that floats next to each other */
+.pagesHeader-w .column {
+    float: left;
+    width: 50%;
+    padding: 10px;
+    background-color: #ccc;
+    height: 250px;
+}
+
+.pagesHeader-w .column a {
+    float: none;
+    color: black;
+    padding: 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.pagesHeader-w .column a:hover {
+    background-color: #ddd;
+}
+
+/* Clear floats after the columns */
+.pagesHeader-w .row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.navbar {
+    width: 100%;
+}
+
+.hyperLink {
+    color: #fff;
+    text-decoration: none;
+}
+
+.ar,.en {
+    margin: 0 10px;
+    padding: 5px;
+    color: #03887f;
+    font-weight: bold;
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #ccc;
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.ar:hover{
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+.en:hover {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+/* english estyle  */
+
+.menuEnglish{
+    text-align: left;
+}
+
+.achievementsLang-w {
+    text-align: left;
+    direction: ltr;
+}
+
+.achievementsLang-w li {
+    text-align: left !important;
+}
+
+
+.activeLanguage {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}

src/app/Internal-Page/internal-page-header/internal-page-header.component.html

@@ -0,0 +1,184 @@
+
+
+    <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+
+      <div class="internalHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                            <li class="profileData-w">
+                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
+                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
+                                    </div>
+                                </div>
+                            </li>
+                            <li><span><i class="fas fa-comments"></i></span></li>
+                            <li><span><i class="fas fa-bell"></i></span></li>
+                        </ul>
+                        <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
+                        <div class="form-group" style="margin:10px 0;">
+                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
+                        </div>
+                    </div>
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
+                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p> 
+                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
+                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>               
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div class="logoHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                        <div class="rightLogo-w">
+                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                    <div class="center text-center">
+                        <h2>المنصه الداخليه</h2>
+                        <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
+                    </div>
+                    </div>
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                    <div class="leftLogo-w">
+                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="pagesHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="navbar">
+                        <button style="cursor:pointer;" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
+                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
+                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                {{parent.name}}
+                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                    <a [routerLink]="parent.link" style="text-decoration:none">{{parent.name}}</a> 
+                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                <div class="row">
+                                    <div *ngFor="let child of parent['childs']">
+                                        <ul class="list-unstyled">
+                                            <li>
+                                                <a [routerLink]="child.link"> {{child.name}}</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+
+
+
+    <ng-template #englishTemplate>
+
+    <div class="internalHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                            <li class="profileData-w">
+                                <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                                    <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
+                                    <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
+                                    </div>
+                                </div>
+                            </li>
+                            <li><span><i class="fas fa-comments"></i></span></li>
+                            <li><span><i class="fas fa-bell"></i></span></li>
+                        </ul>
+                        <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
+                        <div class="form-group" style="margin:10px 0;">
+                            <input type="text" placeholder="أبحث" /><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
+                        </div>
+                    </div>
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
+                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p> 
+                       <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
+                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>               
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div class="logoHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                        <div class="rightLogo-w">
+                            <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:15px"/>
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                    <div class="center text-center">
+                        <h2> Internal Page</h2>
+                        <p>King Faisal Medical Complex in Taif</p>
+                    </div>
+                    </div>
+                    <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                    <div class="leftLogo-w">
+                        <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="pagesHeader-w">
+            <div class="container">
+                <div class="row">
+                    <div class="navbar">
+                        <button style="cursor:pointer" class="btn btn-secondary" (click)="goToHome()"><i class="fas fa-home"></i></button>
+                        <div *ngFor="let parent of internalService.parentsPage; let i = index" class="dropdown">
+                            <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                {{parent.name_en}}
+                                <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                    <a href="{{parent.link}}" style="text-decoration:none">{{parent.name_en}}</a> 
+                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                <ul class="list-unstyled">
+                                    <li  *ngFor="let child of parent['childs']" [className]=" arabicTemplate ? '' : 'menuEnglish' ">
+                                        <a href="{{child.link}}" target="_blank"> {{child.name_en}}</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+
+
+    

src/app/Internal-Page/internal-page-header/internal-page-header.component.ts

@@ -0,0 +1,59 @@
+import { Router } from '@angular/router';
+import { InternalPageService } from './../../shared/internal-page.service';
+import { UserService } from './../../shared/user.service';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-internal-page-header',
+  templateUrl: './internal-page-header.component.html',
+  styleUrls: ['./internal-page-header.component.css']
+})
+export class InternalPageHeaderComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private userservice: UserService, 
+    private internalService: InternalPageService, 
+    private router: Router) { }
+  
+
+
+  ngOnInit() {
+
+
+    this.authSer.arabicTemplate = true;
+    this.authSer.arabicLanguage = true;
+    this.authSer.englishLanguage = false;
+    
+    
+    //this.spinner.show();
+    this.authSer.showDashboardHeader = false;
+    //console.log(this.checkTokenExpire);
+      //get profile data
+    this.userservice.getUserDataProfile();
+    this.authSer.currentDate = this.authSer.writeHijri(new Date(this.authSer.currentDate), 'ar');
+  }
+
+  onLogin() {
+    this.router.navigate(['/login']);
+  }
+
+  onGetProfile() {
+    console.log('profile/'  + this.authSer.dataLoginUser['id']);
+    this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
+  }
+
+  //log out function
+  onLogout() { 
+    localStorage.clear();
+    this.router.navigate(['login']);
+  }
+
+  onDashBoard() {
+    this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
+  }
+
+
+  
+
+}

src/app/Internal-Page/internal-page.module.ts

@@ -0,0 +1,33 @@
+import { InternalPageService } from './../shared/internal-page.service';
+import { InternalPageRoutingModule } from './internal-routing-module';
+import { InternalPageComponent } from './internal-page/internal-page.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
+import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
+import { HospitalContentComponent } from './hospital-content/hospital-content.component';
+import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
+
+
+@NgModule({
+    declarations: [
+        InternalPageComponent,
+        InternalPageHeaderComponent,
+        InternalPageContentComponent,
+        HospitalContentComponent,
+    ],
+    imports: [
+        CommonModule,
+        InternalPageRoutingModule,
+        CollapsibleModule,
+        NgbModule.forRoot(),
+    ],
+    providers: [
+        InternalPageService,
+    ],
+})
+
+export class InternalPageModule {
+
+}

src/app/Internal-Page/internal-page/internal-page.component.css

@@ -0,0 +1,699 @@
+input,button {
+    outline: none;
+}
+
+.internalPage-w {
+    width: 100%;
+    padding-bottom: 30px;
+}
+
+.internalPage-w .internalHeader-w {
+    width: 100%;
+    height: 60px;
+    background-color: #e3dfdf;
+
+    /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
+    background-size: cover; */
+}
+
+.internalPage-w .internalHeader-w .notificationList-w {
+    width: 100%;
+    display: inline-block;
+    text-align: right;
+}
+
+.internalPage-w .internalHeader-w .login  {
+    margin-top: 13px;
+    color: #00a99d;
+    cursor: pointer;
+    text-align: right;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li {
+    display: inline-block; 
+    margin: 0 10px;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li span {
+    color: #00a99d;
+    font-size: 25px;
+    cursor: pointer;
+    transition: all 0.5s;
+    margin-top: 5px;
+    display: block;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w li span:hover i {
+    color: #08726a;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .btn-outline-success {
+    border: none;
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .buttonW:hover {
+    background-color: transparent;
+}
+
+.internalPage-w .internalHeader-w input[type='text'] {
+    background-color: #fff;
+    border: none;
+    color: #ccc;
+    padding: 5px;
+}
+
+.internalPage-w .internalHeader-w .searchBtn {
+    background-color: #fff;
+    border: none;
+    padding: 5px 10px;
+    margin:  0 5px;
+}
+
+.profileData-w img {
+    width: 35px;
+    height: 35px;
+    border: 1px solid #252525;
+    margin: 0 5px;
+}
+
+.buttonW {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    outline: none;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;
+}
+
+.dateW {
+    color: #fff;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold;  
+}
+
+.internalPage-w .internalHeader-w .notificationList-w .profileData-w .dropdown-toggle::after {
+    margin: -1px 10px;
+}
+
+.logoHeader-w {
+    width: 100%;
+    height: 160px;
+    display: inline-block;
+    background: url('../../../assets/image/bottomBackground.jpg');
+    background-size: cover;
+}
+
+.logoHeader-w .rightLogo-w,
+.logoHeader-w .leftLogo-w,
+.logoHeader-w .center {
+    width: 100%;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.logoHeader-w .rightLogo-w {
+    text-align: right;
+}
+
+.logoHeader-w .rightLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .leftLogo-w img {
+    margin-top: 15px;
+}
+
+.logoHeader-w .center h2 {
+    font-size: 30px;
+    color: #bda380;
+    margin-top: 20px;
+}
+
+.logoHeader-w .center p {
+    font-size: 15px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: normal;
+    color: #00a99d;
+}
+
+.logoHeader-w .rightLogo-w img {
+    width: 210px;
+}
+
+.pagesHeader-w {
+    width: 100%;
+    background-color: #dac4a6;
+    margin-top: -6px;
+    position: relative;
+}
+
+.pagesHeader-w .dropdown-toggle:empty::after {
+    position: absolute;
+    top: 13px;
+}
+.pagesHeader-w .navbar {
+    /* overflow: hidden; */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem 1rem;
+}
+
+.pagesHeader-w navbar a {
+    float: left;
+    font-size: 16px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+}
+
+.pagesHeader-w .dropdown {
+    float: left;
+    /* overflow: hidden; */
+}
+
+.pagesHeader-w .dropdown .dropbtn,
+.pagesHeader-w .dropdown .dropbtn a {
+    font-size: 20px;
+    border: none;
+    outline: none;
+    color: #03887f;
+    padding: 14px 16px;
+    background-color: inherit;
+    font: inherit;
+    margin: 0;
+    font-weight: bold;
+}
+
+.pagesHeader-w .navbar a:hover, .dropdown:hover .dropbtn {
+}
+
+.pagesHeader-w .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #bea380;
+    border-radius: 10px;
+    width: 100%;
+    left: 0;
+    top: 44px;
+    padding: 10px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+
+
+.pagesHeader-w .dropdown-content ul li a {
+    color: #fff;
+}
+
+.pagesHeader-w .dropdown-content .header {
+    padding: 16px;
+    color: white;
+}
+
+.pagesHeader-w .dropdown:hover .dropdown-content {
+    background: yello;
+    display: block;
+}
+
+/* Create three equal columns that floats next to each other */
+.pagesHeader-w .column {
+    float: left;
+    width: 50%;
+    padding: 10px;
+    background-color: #ccc;
+    height: 250px;
+}
+
+.pagesHeader-w .column a {
+    float: none;
+    color: black;
+    padding: 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.pagesHeader-w .column a:hover {
+    background-color: #ddd;
+}
+
+/* Clear floats after the columns */
+.pagesHeader-w .row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.navbar {
+    width: 100%;
+}
+
+.hyperLink {
+    color: #fff;
+    text-decoration: none;
+}
+
+.servicesContent-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.carousel-control-next, .carousel-control-prev{
+    cursor: pointer !important;
+}
+
+.slider {
+    width: 100%;
+    height: 500px;
+}
+
+.slider img {
+    width: 100%;
+    height: 500px;
+}
+
+.servicesContent-w .serviceItem-w {
+    width: 100%;
+    height: 150px;
+    padding: 20px 10px;
+    margin: 10px 0;
+    color: #fff;
+    text-align: center;
+    background: radial-gradient(#e5e5e5, #bda380);
+    border-radius: 10px;
+    border-bottom: 4px solid #00a99d;
+    transition: all 0.5s;
+}
+
+.servicesContent-w .serviceItem-w:hover {
+    border-bottom: 4px solid #efe1ce;
+}
+
+.servicesContent-w .serviceItem-w img {
+    width: 50px;
+    height: 50px;
+}
+
+.servicesContent-w .serviceItem-w p {
+    margin-top: 16px;
+}
+
+.servicesContent-w .serviceItem-w a {
+    color: #fff;
+    transform: all 0.5s;
+    margin-top: 15px;
+    font-weight: bold;
+}
+
+.servicesContent-w .serviceItem-w a:hover{
+    color: #00a99d;
+}
+
+.eventPart-w {
+    width: 100%;
+    height: 80px;
+}
+
+.eventPart-w .event {
+    width: 100%;
+    height: 50px;
+    background-color: #f3f0f0;
+    border-radius: 10px;
+}
+
+.eventPart-w .event .now{
+    padding: 5px 0;
+    color: red;
+}
+
+.eventPart-w .event .now img{
+    width: 60px;
+    height: 40px;
+}
+
+.eventPart-w .event .now span{
+    color: #888;
+    padding: 0 10px;
+}
+
+.eventPart-w .event .next{
+    color: green;
+    padding: 10px 0;
+}
+
+.eventPart-w .event .next img{
+    width: 30px;
+    height: 30px;
+}
+
+.eventPart-w .event .next span {
+    color: #888;
+    padding: 0 10px;
+}
+.contentsData-w {
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w,
+.contentsData-w .joinUsEn-w{
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w .joinHeader-w,
+.contentsData-w .joinUsEn-w .joinHeader-w {
+    width: 100%;
+    height: 42px;
+    padding: 10px 0;
+    text-align: center;
+    font-size: 17px;
+    color: #fff;
+    background-color: #bda380;
+}
+
+.contentsData-w .joinUs-w .joinHeading-w,
+.contentsData-w .joinUsEn-w .joinHeading-w {
+    width: 100%;
+    height: 50px;
+    color: #00a99d;
+    text-shadow: 0px 0px 1px;
+    background-color: #f7f7f7;
+    box-shadow: 1px 1px 6px #2525;
+}
+
+.contentsData-w .joinUs-w .joinHeading-w h2,
+.contentsData-w .joinUsEn-w .joinHeading-w h2 {
+    font-size: 18px;
+    padding: 10px 0;
+    text-align: center;
+}
+
+.contentsData-w .joinUs-w .dataContent,
+.contentsData-w .joinUsEn-w .dataContent {
+    width: 100%;
+    padding: 30px 15px;
+    height: 200px;
+    margin-top: 2px;
+    box-shadow: 0 2px 6px #ccc;
+}
+
+.contentsData-w .joinUs-w .dataContent .joinUs-photo,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo {
+    width: 100%;
+}
+
+.contentsData-w .joinUs-w .dataContent .joinUs-photo img,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo img {
+    width: 100%;
+    height: 100px;
+    margin: 0 5px;
+    border: 1px solid #ccc;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w {
+    width: 100%;
+    text-align: right;
+}
+
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w {
+    width: 100%;
+    text-align: left;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w  p,
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+    font-size: 14px;
+    font-weight: bold;
+    color: #bda380;
+}
+
+.contentsData-w .joinUs-w .dataContent  .profileData-w  p span,
+.contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+    color: #bda380;
+    margin: 0 10px;
+}
+
+.sharingEvent-w {
+    width: 100%;
+    display: inline-block;
+}
+.sharingEvent-w .sharingHeader-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #bda380;
+}
+
+.sharingEvent-w .sharingHeader-w h2 {
+    font-size: 18px;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    color: #fff;
+}
+.sharingEvent-w .congeratolation,
+.sharingEvent-w .sadDead-w  {
+    width: 100%;
+    display: inline-block;
+    box-shadow: 0 0 7px #ccc;
+}
+
+.sharingEvent-w .congeratolation h2,
+.sharingEvent-w .sadDead-w h2 {
+    margin: 0;
+    padding: 15px 0;
+    text-align: center;
+    background-color: #f7f7f7;
+    font-size: 18px;
+    color: #03b0b3;
+    text-shadow: 0 0 1px;
+}
+.sharingEvent-w .content,
+.sharingEvent-w .content{
+    width: 100%;
+    height: 200px;
+    background-color: #fff;
+    box-shadow: 0 2px 6px #ccc;
+    text-align: center;
+    padding: 30px 0;
+}
+
+.sharingEvent-w .content p,
+.sharingEvent-w .content p {
+    color: #bda380;
+    font-weight: bold;
+}
+
+.sharingEvent-w .content p span,
+.sharingEvent-w .content p span {
+    color: #bda380;
+    font-weight: bold;
+}
+
+.sharingEvent-w .content .event {
+    color: #00a99d;
+}
+
+.secondServices-w {
+    width: 100%;
+    padding: 40px 0;
+    display: inline-block;
+}
+
+.secondServices-w .contentSecondSer-w {
+    width: 100%;
+    display: inline-block;
+    margin: 10px 0;
+}
+
+.secondServices-w .contentSecondSer-w .headerSer-w {
+    width: 100%;
+    padding: 13px 0;
+    background-color: #bda380;
+    text-align: center;
+    color: #fff;
+}
+
+.secondServices-w .contentSecondSer-w .titleSer-w {
+    width: 100%;
+    padding: 13px 0;
+    background-color: #f7f7f7;
+    box-shadow: 0 0 6px #ccc;
+    text-align: center;
+    color: #08726a;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer {
+    width: 100%;
+    height: 200px;;
+    background-color: #fff;
+    box-shadow: 0 0 1px #ccc;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w img{
+    width: 30px;
+    height: 30px;
+}
+
+.secondServices-w .contentSecondSer-w .contentSer .fieldData-w p{
+    text-align: center;
+    font-size: 12px;
+}
+
+.tabs {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+}
+
+.tabs .lastTab-w {
+    width: 100%;
+}
+
+.tabs .lastTab-w .headerTab-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #bda380;
+    text-align: center;
+    color: #fff;
+}
+
+.tabs .lastTab-w .menuTab-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #f1f1f1;
+}
+
+.tabs .lastTab-w .menuTab-w ul {
+    width: 100%;
+    display: inline-block;
+    padding: 5px 0;
+    text-align: center;
+}
+
+.tabs .lastTab-w .menuTab-w ul li {
+    display: inline-block;
+    margin: 0 10px;
+    padding: 0 10px;
+    border-left: 1px solid #bda380;
+    cursor: pointer;
+    color: #03b0b3;
+    text-shadow: 0 0 1px;
+}
+
+.tabs .lastTab-w .menuTabContent-w {
+    width: 100%;
+    display: inline-block;
+    height: 200px;
+    box-shadow: 0 0 6px #ccc;
+}
+
+.tabs .lastTab-w .menuTabContent-w h2 {
+    font-size: 18px;
+    padding: 20px 0;
+}
+
+.tabs .lastTab-w .menuTabContent-w ol {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tabs .lastTab-w .menuTabContent-w ol li {
+    text-align: right;
+    margin: 0 20px;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+}
+
+.tabs .lastTab-w .menuTab-w ul li:last-child{
+    border-left: none;
+}
+
+.tabs .recods {
+    width: 100%;
+    display: inline-block;
+}
+
+.tabs .recods .headerRecords-w {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background-color: #bda380;
+    color: #fff;
+    text-align: center;
+}
+
+.tabs .recods .recordsContent-w {
+    width: 100%;
+    display: inline-block;
+    box-shadow: 0 0 6px #ccc;
+} 
+
+.tabs .recods .recordsContent-w ol {
+    width: 100%;
+    text-align: right;
+    padding: 0 30px;
+}
+
+.tabs .recods .recordsContent-w ol li {
+    font-size: 15px;
+    padding: 0 10px;
+    margin: 15px 0;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 13px;
+}
+
+.tabs .recods .recordsContent-w ol li .collapse {
+    width: 100%;
+    display: inline-block;
+    background-clip: #f7f7f7;
+    box-shadow: 0 0 6px #ccc;
+    padding: 5px;
+}
+
+.tabs .recods .recordsContent-w ol li .collapse p {
+    font-size: 16px;
+}
+
+
+@media(max-width:768px) {
+    .backgroundXS {
+        background-color: red;
+    }
+}
+
+
+/* english estyle  */
+
+.menuEnglish{
+    text-align: left;
+}
+
+.achievementsLang-w {
+    text-align: left;
+    direction: ltr;
+}
+
+.achievementsLang-w li {
+    text-align: left !important;
+}
+
+
+.activeLanguage {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+
+
+
+

src/app/Internal-Page/internal-page/internal-page.component.html

@@ -0,0 +1,7 @@
+<app-internal-page-header></app-internal-page-header>
+
+<div class="internalPage-w" [style.min-height.px]="myInnerHeight">
+    <div class="routingContent-w">
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/Internal-Page/internal-page/internal-page.component.ts

@@ -0,0 +1,239 @@
+import { InternalPageService } from './../../shared/internal-page.service';
+import { Router } from '@angular/router';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import * as moment from 'moment';
+import { UserService } from '../../shared/user.service';
+
+//import 'moment/locale/ar-SA';
+
+
+
+@Component({
+  selector: 'app-internal-page',
+  templateUrl: './internal-page.component.html',
+  styleUrls: ['./internal-page.component.css']
+})
+export class InternalPageComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private router:Router, 
+    private userservice: UserService, 
+    private internalService: InternalPageService,
+    private spinner: NgxSpinnerService,) { }
+
+    // joinUs = [];
+    // reportsData = [];
+    // externalServices = [];
+    // congratulations = [];
+    // condolences = [];
+    // internalServices = [];
+    // tabsData = [];
+    // achievements = [];
+    // checkShowData: boolean;
+    // tabtype:number = 0;
+    // expandedIndex:number;
+    // live_event = [];
+    // next_lecture = [];
+   myInnerHeight = window.innerHeight;
+   externalServices = [];
+
+
+    
+    // flag: boolean = false;
+  
+    // catchEvent(event) {
+    //   this.flag = true
+    //   console.log(event)
+    // }
+  
+    // hide(event) {
+    //   this.flag = false;
+    // }
+
+  ngOnInit() {
+
+    this.authSer.arabicTemplate = true;
+    this.authSer.arabicLanguage = true;
+    this.authSer.englishLanguage = false;
+    this.spinner.show();
+
+    //this.spinner.show();
+    this.authSer.showDashboardHeader = false;
+    
+   //get profile data
+    this.userservice.getUserDataProfile();
+    this.spinner.hide();
+    //get parent and child data
+    this.internalService.getParentData();
+    this.router.navigate(['InternalPage/home']);
+
+    // //get slider data
+    // this.internalService.getSliderData().subscribe(
+    //   (responce) => {
+    //     console.log('responxce', responce);
+    //     this.reportsData = responce['reports'];
+    //   }, 
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // //get externals list 
+    // this.internalService.getExternalServicesList().subscribe(
+    //   (responce) => {
+    //     console.log('external_list' , responce);
+    //     this.externalServices = responce['external_services'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // //get join us data 
+    // this.internalService.getJoinUsData().subscribe(
+    //   (responce) => {
+    //     console.log('joooin us', responce);
+    //     this.joinUs = responce['user'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getCongatoration().subscribe(
+    //   (responce) => {
+    //     console.log('condddddd' ,responce['event']);
+    //     this.congratulations = responce['event'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getCondolences().subscribe(
+    //   (responce) => {
+    //     console.log('condddddd',responce['event']);
+    //     this.condolences = responce['event'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getInternalServicesList().subscribe(
+    //   (responce) => {
+    //     console.log('internal serviceees',responce);
+    //     this.internalServices = responce['internal_services'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getTabData(this.tabtype).subscribe(
+    //   (responce) => {
+    //     this.tabsData = responce['tabs'];
+    //     if(this.tabsData.length > 0) {
+    //       this.checkShowData = false;
+    //     } else {
+    //       this.checkShowData = true;
+    //     }
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getForthAchievementsList().subscribe(
+    //   (responce) => {
+    //     console.log('weeeeeeeeeeeeeeeeeeee', responce);
+    //     this.achievements = responce['achievements'];
+    //     this.spinner.hide();
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // this.internalService.getEventNow().subscribe(
+    //   (responce) => {
+    //     console.log( 'liiiiiiiiive', responce);
+    //     this.live_event = responce['live_lecture'];
+    //     this.next_lecture = responce['next_lecture'];
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // )
+
+  }
+
+  // onLogin() {
+  //   this.router.navigate(['/login']);
+  // }
+
+  // onGetProfile() {
+  //   console.log('profile/'  + this.authSer.dataLoginUser['id']);
+  //   this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
+  // }
+
+  // //log out function
+  // onLogout() { 
+  //   localStorage.clear();
+  //   this.router.navigate(['login']);
+  // }
+
+  // onDashBoard() {
+  //   this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
+  // }
+
+  // getListPage(parent) {
+  //   for(let i = 0; i< this.internalService.parentsPage.length; i++) {
+  //     if(this.internalService[i].id == parent.id) {
+  //       this.internalService[i].active = 1;
+  //     } else if(this.internalService[0].id != parent.id) {
+  //       this.internalService[i].active = 0;
+  //     } else {
+  //       this.internalService[i].active = 0;
+  //     }
+  //   }
+  // };
+
+  // onGetData(numberTab) {
+  //   this.spinner.show();
+  //   this.tabsData = [];
+  //   this.tabtype = numberTab;
+  //   this.internalService.getTabData(this.tabtype).subscribe(
+  //     (responce) => {
+  //       this.tabsData = responce['tabs'];
+  //       if(this.tabsData.length > 0) {
+  //         this.checkShowData = false;
+  //       } else {
+  //         this.checkShowData = true;
+  //       }
+  //       this.spinner.hide();
+  //     },
+  //     (error) => {
+  //       console.log(error);
+  //     }
+  //   )
+  // }
+
+  // open(data,i) {
+  //   console.log(data);
+  //   this.expandedIndex = i;
+  // }
+
+  // closeCollapse(i) {
+  //   this.expandedIndex = -1;
+  // }
+
+  
+
+
+
+
+}

src/app/Internal-Page/internal-routing-module.ts

@@ -0,0 +1,31 @@
+import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
+import { NgModule } from '@angular/core';
+// import { AuthGuardService as AuthGuard } from './../shared/auth-guard.service';
+import { RouterModule, Routes } from '@angular/router';
+import { InternalPageComponent } from './internal-page/internal-page.component';
+
+import { HospitalContentComponent } from './hospital-content/hospital-content.component';
+import { LoginComponent } from './../login/login.component';
+
+const internalPageRoutes: Routes = [
+        {path: '' , redirectTo: '/InternalPage', pathMatch: 'full'},
+        {path: 'InternalPage' , component: InternalPageComponent, children:[
+        {path: 'home', component: InternalPageContentComponent},
+        {path: 'hospital', component: HospitalContentComponent},
+    ]},
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(internalPageRoutes),
+    ],
+    //exports: [internalPageRoutes]
+    exports: [
+        RouterModule
+      ]
+})
+
+export class InternalPageRoutingModule {
+
+}
+

src/app/app-routing.module.ts

@@ -1,10 +1,118 @@
+import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
+import { AddMenuComponent } from './dashboard/main-menu/add-menu/add-menu.component';
+import { MainListComponent } from './dashboard/main-menu/main-list/main-list.component';
+import { AddLectureComponent } from './dashboard/lectures/add-lecture/add-lecture.component';
+import { LecturesListComponent } from './dashboard/lectures/lectures-list/lectures-list.component';
+import { AddInternalServicesComponent } from './dashboard/internal-services/add-internal-services/add-internal-services.component';
+import { AddFooterComponent } from './dashboard/footer/add-footer/add-footer.component';
+import { FooterListComponent } from './dashboard/footer/footer-list/footer-list.component';
+import { AddNewsComponent } from './dashboard/news/add-news/add-news.component';
+import { AddTabComponent } from './dashboard/tabs/add-tab/add-tab.component';
+import { TabListComponent } from './dashboard/tabs/tab-list/tab-list.component';
+import { AddAchievementComponent } from './dashboard/achievements/add-achievement/add-achievement.component';
+import { AchievementComponent } from './dashboard/achievements/achievement-list/achievement.component';
+import { AddExternalComponent } from './dashboard/external-services/add-external/add-external.component';
+import { ExternalListComponent } from './dashboard/external-services/external-list/external-list.component';
+import { AddHospitalComponent } from './dashboard/hospitals/add-hospital/add-hospital.component';
+import { ReportListComponent } from './dashboard/report-list/report-list.component';
+import { RoleReport2Component } from './dashboard/roles/role-report2/role-report2.component';
+import { AddSectionComponent } from './dashboard/sections/add-section/add-section.component';
+import { SectionListComponent } from './dashboard/sections/section-list/section-list.component';
+import { AddDepartmentComponent } from './dashboard/department/add-department/add-department.component';
+import { DepartmentListComponent } from './dashboard/department/department-list/department-list.component';
+import { AddRolesComponent } from './dashboard/roles/add-roles/add-roles.component';
+import { FormUserComponent } from './dashboard/users/form-user/form-user.component';
+import { UsersComponent } from './dashboard/users/users.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './login/login.component';
+import { RegesterComponent } from './regester/regester.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { AuthGuardService as AuthGuard } from './shared/auth-guard.service';
+import { ServiceItemComponent } from './dashboard/service-item/service-item.component';
+import { RolesListComponent } from './dashboard/roles/roles-list/roles-list.component';
+import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
+import { UserPermissionComponent } from './dashboard/users/user-permission/user-permission.component';
+import { UserReportComponent } from './dashboard/users/user-report/user-report.component';
+import { RoleReportComponent } from './dashboard/roles/role-report/role-report.component';
+import { ReportsPageComponent } from './dashboard/reports-page/reports-page.component';
+import { HospitalListComponent } from './dashboard/hospitals/hospital-list/hospital-list.component';
+import { EventsComponent } from './dashboard/events/events.component';
+import { AddEventComponent } from './dashboard/events/add-event/add-event.component';
+import { NewsListComponent } from './dashboard/news/news-list/news-list.component';
+import { InternalServicesComponent } from './dashboard/internal-services/internal-services.component';
+import { InternalPageComponent } from './Internal-Page/internal-page/internal-page.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: '', redirectTo: '/login', pathMatch: 'full'},
+  {path: 'login', component: LoginComponent},
+  {path: 'signup', component: RegesterComponent},
+  {path: 'InternalPage', component: InternalPageComponent, canActivate: [AuthGuard]},
+  {path: 'profile/:idProfile', component: RegesterComponent, canActivate: [AuthGuard]},
+  {path: 'dashboard/:id', component: DashboardComponent, canActivate: [AuthGuard]},
+  {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
+    {path: 'users/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
+    {path: 'roles/:rolesPageId', component: RolesListComponent, canActivate: [AuthGuard]},
+    {path: 'departments/:departsPageId', component: DepartmentListComponent, canActivate: [AuthGuard]},
+    {path: 'sections/:sectionPageId', component: SectionListComponent, canActivate: [AuthGuard]},
+    {path: 'reports', component: ReportsPageComponent, canActivate: [AuthGuard]},
+    {path: 'addu/:type_add', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'addJoinUs', component: AddJoinUsComponent, canActivate:[AuthGuard]},
+    {path: 'joinUs/:typeJoinMode/:editJoinId', component: AddJoinUsComponent, canActivate:[AuthGuard]},
+    {path: 'join/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'user/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'addRole', component: AddRolesComponent, canActivate: [AuthGuard]},
+    {path: 'editRole/:typeRoleMode/:roleEditId', component: AddRolesComponent, canActivate: [AuthGuard]},
+    {path: 'addAdminstration', component: AddDepartmentComponent, canActivate: [AuthGuard]},
+    {path: 'editAdminstration/:typeAdminMode/:editAdminId', component: AddDepartmentComponent, canActivate: [AuthGuard]},
+    {path: 'addSection', component: AddSectionComponent, canActivate: [AuthGuard]},
+    {path: 'editSection/:typeSectionMode/:editSectionId', component: AddSectionComponent, canActivate: [AuthGuard]},
+    {path: 'hospitalsList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
+    {path: 'mangementList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
+    {path: 'add/:typeAdd' , component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'Hospital/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'Management/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'eventsList/:eventPageId', component: EventsComponent, canActivate: [AuthGuard]},
+    {path: 'addEvent', component: AddEventComponent, canActivate: [AuthGuard]},
+    {path: 'Event/:typeEventMode/:editEventId', component: AddEventComponent, canActivate:[AuthGuard]},
+    {path: 'externalsList/:externalPageId', component: ExternalListComponent, canActivate: [AuthGuard]},
+    {path: 'addExternal', component: AddExternalComponent, canActivate: [AuthGuard]},
+    {path: 'externalService/:typeExternalMode/:editExternalId', component: AddExternalComponent, canActivate: [AuthGuard]},
+    {path: 'achievementsList/:achievementPageId', component: AchievementComponent, canActivate: [AuthGuard]},
+    {path: 'addAchievement', component: AddAchievementComponent, canActivate: [AuthGuard]},
+    {path: 'achievement/:typeAchieventMode/:editAchievementId', component: AddAchievementComponent, canActivate: [AuthGuard]},
+    {path: 'joinUs/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
+    {path: 'tabs/:tabPageId', component: TabListComponent, canActivate: [AuthGuard]},
+    {path: 'addTab', component: AddTabComponent, canActivate: [AuthGuard]},
+    {path: 'tab/:typeTabMode/:editTabId', component: AddTabComponent, canActivate: [AuthGuard]},
+    {path: 'newsList/:newsPageId', component: NewsListComponent, canActivate: [AuthGuard]},
+    {path: 'addNews', component: AddNewsComponent, canActivate: [AuthGuard]},
+    {path: 'new/:typeNewMode/:editNewId', component: AddNewsComponent, canActivate: [AuthGuard]},
+    {path: 'footerList/:footerPageId', component: FooterListComponent, canActivate: [AuthGuard]},
+    {path: 'addFooter', component: AddFooterComponent, canActivate: [AuthGuard]},
+    {path: 'footer/:typeFooterMode/:editFooterId', component: AddFooterComponent, canActivate: [AuthGuard]},
+    {path: 'internalServicesList/:internalPageId', component: InternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'addInternalServices', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'InternalServices/:typeInternalMode/:editInternalId', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'lecturesList/:lecturePageId', component: LecturesListComponent, canActivate:[AuthGuard]},
+    {path: 'addLecture', component: AddLectureComponent, canActivate: [AuthGuard]},
+    {path: 'Lecture/:typeLectureMode/:editLectureId', component: AddLectureComponent, canActivate: [AuthGuard]},
+    {path: 'mainMenuList/:menuPageId', component: MainListComponent, canActivate:[AuthGuard]},
+    {path: 'addMenu', component: AddMenuComponent, canActivate: [AuthGuard]},
+    {path: 'menu/:typeMenuMode/:editMenuId', component: AddMenuComponent, canActivate: [AuthGuard]},
+    {path: 'userPermission/:userPermissionId', component: UserPermissionComponent, canActivate: [AuthGuard]},
+    {path: 'userreport/:reportUserId', component: UserReportComponent, canActivate: [AuthGuard]},
+    {path: 'roleReport/:roleReportId', component: RoleReportComponent, canActivate: [AuthGuard]},
+    {path: 'userInRoleReport/:userRoleReportId', component: RoleReport2Component, canActivate: [AuthGuard]},
+    {path: 'reportList/:reportName', component: ReportListComponent},
+  ]},
+  {path: 'page-not-found', component: PageNotFoundComponent},
+  {path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
+
 export class AppRoutingModule { }

src/app/app.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'medical-project';
+export class AppComponent implements OnInit {
+
+  constructor() {
+
+  }
+
+
+
+  ngOnInit() {}
+   
+
 }

src/app/app.module.ts

@@ -1,18 +1,199 @@
+import { FooterComponent } from './dashboard/main-footer/footer.component';
+import { HeaderComponent } from './dashboard/header/header.component';
+
+import { MainMenuService } from './shared/main-menu.service';
+import { InternalSerService } from './shared/internal-ser.service';
+import { FooterService } from './shared/footer.service';
+import { NewService } from './shared/new.service';
+import { AchievementsService } from './shared/achievements.service';
+import { ExternalSerService } from './shared/external-ser.service';
+import { EventService } from './shared/event.service';
+import { HospitalService } from './shared/hospital.service';
+import { ReportService } from './shared/report.service';
+import { SectionService } from './shared/section.service';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+
+import { DepartmentService } from './shared/department.service';
+import { DepartmentListComponent } from './dashboard/department/department-list/department-list.component';
+import { AuthGuardService } from './shared/auth-guard.service';
+import { UserService } from './shared/user.service';
+import { ResponceInterceptService } from './shared/responce-intercept.service';
+import { TokenInterceptorService } from './shared/token-interceptor.service';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
 
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/ar';
+import { NgModule} from '@angular/core';
+
+
+import { QuillModule } from 'ngx-quill';
+
+import { MomentModule } from 'ngx-moment';
+
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { LoginComponent } from './login/login.component';
+import { RegesterComponent } from './regester/regester.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { AuthServiceService } from './shared/auth-service.service';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
+import { ServiceItemComponent } from './dashboard/service-item/service-item.component';
+import { UsersComponent } from './dashboard/users/users.component';
+import { FormUserComponent } from './dashboard/users/form-user/form-user.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { NgxSpinnerModule } from 'ngx-spinner';
+import {NgxPaginationModule} from 'ngx-pagination';
+import { FiltterPipePipe } from './filtter-pipe.pipe';
+import { RolesService } from './shared/roles.service';
+import { RolesListComponent } from './dashboard/roles/roles-list/roles-list.component';
+import { AddRolesComponent } from './dashboard/roles/add-roles/add-roles.component';
+import { AddDepartmentComponent } from './dashboard/department/add-department/add-department.component';
+import { SectionListComponent } from './dashboard/sections/section-list/section-list.component';
+import { AddSectionComponent } from './dashboard/sections/add-section/add-section.component';
+import { UserPermissionComponent } from './dashboard/users/user-permission/user-permission.component';
+import { AlifeFileToBase64Module } from 'alife-file-to-base64';
+import { UserReportComponent } from './dashboard/users/user-report/user-report.component';
+import { RoleReportComponent } from './dashboard/roles/role-report/role-report.component';
+import { RoleReport2Component } from './dashboard/roles/role-report2/role-report2.component';
+import { ReportsPageComponent } from './dashboard/reports-page/reports-page.component';
+import { ReportListComponent } from './dashboard/report-list/report-list.component';
+import { EnglishCharactersDirective } from './shared/english-characters.directive';
+import { OnlyNumberDirective } from './shared/only-number.directive';
+import { HospitalListComponent } from './dashboard/hospitals/hospital-list/hospital-list.component';
+import { AddHospitalComponent } from './dashboard/hospitals/add-hospital/add-hospital.component';
+import { EventsComponent } from './dashboard/events/events.component';
+import { AddEventComponent } from './dashboard/events/add-event/add-event.component';
+import { ExternalListComponent } from './dashboard/external-services/external-list/external-list.component';
+import { AddExternalComponent } from './dashboard/external-services/add-external/add-external.component';
+import { AchievementComponent } from './dashboard/achievements/achievement-list/achievement.component';
+import { AddAchievementComponent } from './dashboard/achievements/add-achievement/add-achievement.component';
+import { TabListComponent } from './dashboard/tabs/tab-list/tab-list.component';
+import { AddTabComponent } from './dashboard/tabs/add-tab/add-tab.component';
+import { NewsListComponent } from './dashboard/news/news-list/news-list.component';
+import { AddNewsComponent } from './dashboard/news/add-news/add-news.component';
+import { FooterListComponent } from './dashboard/footer/footer-list/footer-list.component';
+import { AddFooterComponent } from './dashboard/footer/add-footer/add-footer.component';
+import { InternalServicesComponent } from './dashboard/internal-services/internal-services.component';
+import { AddInternalServicesComponent } from './dashboard/internal-services/add-internal-services/add-internal-services.component';
+import { LecturesListComponent } from './dashboard/lectures/lectures-list/lectures-list.component';
+import { AddLectureComponent } from './dashboard/lectures/add-lecture/add-lecture.component';
+import { MainListComponent } from './dashboard/main-menu/main-list/main-list.component';
+import { AddMenuComponent } from './dashboard/main-menu/add-menu/add-menu.component';
+import { DashboardContent } from './dashboard/dashboard-content';
+import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
+import { InternalPageModule } from './Internal-Page/internal-page.module';
+import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
+
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    LoginComponent,
+    RegesterComponent,
+    PageNotFoundComponent,
+    DashboardComponent,
+    DashboardContent,
+    ServiceItemComponent,
+    ServiceItemComponent,
+    UsersComponent,
+    FormUserComponent,
+    FiltterPipePipe,
+    RolesListComponent,
+    AddRolesComponent,
+    DepartmentListComponent,
+    AddDepartmentComponent,
+    SectionListComponent,
+    AddSectionComponent,
+    UserPermissionComponent,
+    UserReportComponent,
+    RoleReportComponent,
+    RoleReport2Component,
+    ReportsPageComponent,
+    ReportListComponent,
+    EnglishCharactersDirective,
+    OnlyNumberDirective,
+    HospitalListComponent,
+    AddHospitalComponent,
+    EventsComponent,
+    AddEventComponent,
+    ExternalListComponent,
+    AddExternalComponent,
+    AchievementComponent,
+    AddAchievementComponent,
+    TabListComponent,
+    AddTabComponent,
+    NewsListComponent,
+    AddNewsComponent,
+    FooterListComponent,
+    AddFooterComponent,
+    InternalServicesComponent,
+    AddInternalServicesComponent,
+    LecturesListComponent,
+    AddLectureComponent,
+    MainListComponent,
+    AddMenuComponent,
+    AddJoinUsComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    FormsModule,
+    ReactiveFormsModule,
+    HttpModule,
+    HttpClientModule,
+    InternalPageModule,
+    AppRoutingModule,
+    SlideMenuModule,
+    NgxSpinnerModule,
+    NgxPaginationModule,
+    MomentModule,
+    AlifeFileToBase64Module,
+    BrowserAnimationsModule,  // <-- include required BrowserAnimationsModule
+    CollapsibleModule,
+    ToastrModule.forRoot(), // ToastrModule added
+    NgbModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
+    QuillModule,
+  ],
+  providers: [AuthServiceService,
+    TokenInterceptorService,
+    UserService,
+    AuthGuardService,
+    RolesService,
+    SectionService,
+    DepartmentService,
+    ReportService,
+    HospitalService,
+    EventService,
+    NewService,
+    FooterService,
+    MainMenuService,
+    ExternalSerService,
+    AchievementsService,
+    InternalSerService,
+    {provide: LocationStrategy, useClass: HashLocationStrategy},
+    ResponceInterceptService , {
+      provide: HTTP_INTERCEPTORS,
+      useClass: TokenInterceptorService,
+      multi: true
+    },
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/dashboard/achievements/achievement-list/achievement.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/achievements/achievement-list/achievement.component.html

@@ -0,0 +1,72 @@
+<div class="container">
+    <div class="row">
+      <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه إداره المحتوي / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> الإنجازات العامه</li>
+          </ul>
+        <hr class="hr">
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+  
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="form-group">
+          <span class="spanSelect-w">أظهر
+            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+            </select>
+            من العناصر
+          </span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6">
+      
+      </div>
+    </div>
+    
+    <table class="table table-bordered">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label>
+            </div>
+          </th>
+          <th>العنوان</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let achievement of achievementsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{achievement.id}}" [(ngModel)]="achievement.selected" [value]='achievement' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{achievement.id}}" style="color:#2a2a2a"></label>
+            </div>
+          </td>
+          <td>{{achievement.title}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(achievement.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+  

src/app/dashboard/achievements/achievement-list/achievement.component.ts

@@ -0,0 +1,222 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { AchievementsService } from './../../../shared/achievements.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+
+@Component({
+  selector: 'app-achievement',
+  templateUrl: './achievement.component.html',
+  styleUrls: ['./achievement.component.css']
+})
+export class AchievementComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private userSer: UserService,
+    private toastr: ToastrService,
+    private achievementsServie: AchievementsService) { }
+
+  pageId: number;
+  achievementsList = [];
+  rolesId = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+    
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['achievementPageId'];
+        this.achievementsServie.getAchievementsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.achievementsList = responce['achievements'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 11) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_achievement'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_achievement'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_achievements'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no roles');
+              }
+            }
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+  for (var i = 0; i < this.achievementsList.length; i++) {
+    this.achievementsList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.achievementsList.every(function(item:any) {
+        return item.selected == true;
+      })
+  }
+
+  //change page 
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.achievementsList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.achievementsServie.getAchievementsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.achievementsList = responce['achievements'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.achievementsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.achievementsList = [];
+    this.dataTableNumber = event.target.value;
+    this.achievementsServie.getAchievementsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.achievementsList = responce['achievements'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+  //filtter function
+  filtterFunc(data) {
+    this.achievementsList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    this.achievementsServie.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.achievementsList = responce['achievements'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  }
+
+   //deleted function
+   onDelete() {
+    this.rolesId = [];
+    for(let i = 0; i < this.achievementsList.length; i++) {
+      if(this.achievementsList[i].selected == true) {
+        this.rolesId.push(this.achievementsList[i].id);
+      }
+    }
+
+    console.log(this.rolesId);
+
+    this.achievementsServie.deleteAchievement(this.rolesId).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //add roles
+  onAdd(){
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'addAchievement']);
+  }  
+
+  //edit role
+  onEdit(editID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'achievement/edit/' + editID]);
+  }
+
+ 
+    
+
+}

src/app/dashboard/achievements/add-achievement/add-achievement.component.css

@@ -0,0 +1,3 @@
+input {
+    font-size: 13px !important;
+}

src/app/dashboard/achievements/add-achievement/add-achievement.component.html

@@ -0,0 +1,58 @@
+  <div class="container">
+    
+    <div class="row" style="margin-bottom: 30px;">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه إداره المحتوي / </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">  الإنجازات العامه / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+          </ul>
+          <hr class="hr">
+        </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+
+        <form (ngSubmit)="onSubmitted()" #f="ngForm">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-6">
+              <div class="form-group">
+                <label for="title" style="float: right; margin-right: 5px">العنوان باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" placeholder="العنوان باللغه العربيه" id="title" name="title" ngModel [ngModel]="achiv.title" #title="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6">
+              <div class="form-group">
+                <label for="title_en" style="float: right; margin-right: 5px">العنوان باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="title_en" placeholder="العنوان باللغه الانجليزيه" name="title_en" ngModel [ngModel]="achiv.title_en" #title="ngModel" required/>
+              </div>
+            </div>
+            
+            <div class="col-12 col-sm-12 col-md-12">
+              <div class="form-group">
+                <label for="description" style="float:right;margin-right: 5px">الوصف باللغه العربيه <span class="spanReqired-w">*</span></label>
+                <quill-editor name="description" ngModel [ngModel]="achiv.description" #description="ngModel" required>
+
+                </quill-editor>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-12">
+              <div class="form-group">
+                <label for="description_en" style="float:right;margin-right: 5px">الوصف باللغه الانجليزيه <span class="spanReqired-w">*</span></label>
+              <quill-editor id="description_en" name="description_en" ngModel [ngModel]="achiv.description_en" #description="ngModel" required>
+
+              </quill-editor>
+              </div>
+            </div>
+
+          </div>
+          
+          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+
+        </form>
+
+      </div>
+    </div>
+  </div>

src/app/dashboard/achievements/add-achievement/add-achievement.component.ts

@@ -0,0 +1,103 @@
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AchievementsService } from './../../../shared/achievements.service';
+import { NgForm } from '@angular/forms';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-add-achievement',
+  templateUrl: './add-achievement.component.html',
+  styleUrls: ['./add-achievement.component.css']
+})
+export class AddAchievementComponent implements OnInit {
+
+  @ViewChild('f') dataForm: NgForm;
+
+  constructor(private userSer: UserService, 
+    private authSer: AuthServiceService, 
+    private toastr: ToastrService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private achievService: AchievementsService) { }
+  
+    typeMode: boolean = false;
+    typeLink: string = '';
+    achievId: number;
+  
+    achiv = {
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+    }
+
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+
+    this.userSer.getUserDataProfile();
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeAchieventMode'] == 'edit') {
+          this.spinner.show();
+          this.typeLink = 'تعديل';
+          this.typeMode = true;
+          this.achievId = params['editAchievementId'];
+          this.achievService.getAchievementData(this.achievId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.achiv.title = responce['achievement'].title;
+              this.achiv.title_en = responce['achievement'].title_en;
+              this.achiv.description = responce['achievement'].description;
+              this.achiv.description_en = responce['achievement'].description_en;
+              this.spinner.hide();
+            }
+          );
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    )
+  }
+
+  onSubmitted() {
+    const dataFormAchiev = this.dataForm.value;
+    if(this.typeMode) {
+      this.achievService.editAchievement(dataFormAchiev, this.achievId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error(' خطأ في التعديل !');
+        }
+      );
+    } else {
+      this.achievService.addAchievements(dataFormAchiev).subscribe(
+        (responce) => {
+          this.toastr.success('تم الاضافه بنجاح');
+          console.log(responce);
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الاضافه');
+        }
+      );
+    }
+  }
+
+}

src/app/dashboard/add-join-us/add-join-us.component.css

@@ -0,0 +1,92 @@
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    top: 10px;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+input {
+    font-size: 13px !important;
+}
+/* 
+.inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.regesterBtn-w {
+    width: 200px;
+    display: block;
+    margin:  20px auto;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+

src/app/dashboard/add-join-us/add-join-us.component.html

@@ -0,0 +1,57 @@
+<div class="userForm-w">
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه الصلاحيات / </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">خدمه إداره المحتوي / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}}  </li>
+          </ul>
+          <hr class="hr">
+        </div>
+      </div>
+      <form [formGroup]="joinUsForm" (ngSubmit)="onSubmittedForm()">
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+            <div class="form-group text-center imgContainer">
+                <img [src]="urlImg" class="imgProfile" height="200"> 
+                <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="name" style="float:right">الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+              <input type="text" id="name" class="form-control" placeholder="الاسم باللغه العربيه" formControlName="name" />
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="name_en" style="float:right">الأسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+              <input type="text" id="name_en" class="form-control" placeholder="الاسم باللغه الانجليزيه" formControlName="name_en" />
+            </div>
+          </div>
+  
+  
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
+              <input type="date" class="form-control" placeholder="تاريخ التوظيف الهجري" id="date_employment_hij" formControlName="date_of_employment_hij" />
+            </div>
+          </div>
+         
+          
+          <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
+              <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
+                <option *ngFor="let admin of adminstrations; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
+              </select>
+            </div>
+          </div>
+         
+        </div>
+        <button type="submit" [disabled]="!joinUsForm.valid" class="btn btn-success regesterBtn-w">حفظ</button>
+      </form>
+  </div>
+</div>

src/app/dashboard/add-join-us/add-join-us.component.ts

@@ -0,0 +1,189 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../shared/user.service';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Location } from '@angular/common';
+
+
+@Component({
+  selector: 'app-add-join-us',
+  templateUrl: './add-join-us.component.html',
+  styleUrls: ['./add-join-us.component.css']
+})
+export class AddJoinUsComponent implements OnInit {
+
+  constructor(private userSer: UserService,
+    private spineer: NgxSpinnerService,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService,
+    private location: Location,
+    private toastr: ToastrService) { }
+
+    adminstrations = [];
+    typeLink: string = 'إنشاء جديد';
+    urlImg: string =  '../../assets/image/avatar.png';
+    joinUsForm: FormGroup;
+    checkMode: boolean = false;
+    checkChangeImage: boolean = false;
+    checkValidImg: boolean = false;
+    photoEdit: boolean = true;
+    imageBase64: string = '';
+    photoType: string = '';
+    joinId: number;
+
+
+
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+     //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    //get profile data
+    this.userSer.getUserDataProfile();
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.joinId = params['editJoinId'];
+      }
+    );
+
+    this.joinUsForm = new FormGroup({
+      name: new FormControl(null, Validators.required),
+      name_en: new FormControl(null, Validators.required),
+      date_of_employment_hij: new FormControl(null, Validators.required),
+      adminstration_id: new FormControl(null, Validators.required),
+    });
+
+    //get adminstration
+    this.userSer.getAdministration().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.adminstrations = responce['adminstrations'];
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+
+  
+
+
+    this.route.params.subscribe(
+      (params:Params) => {
+        if(params['typeJoinMode'] == 'edit') {
+          this.spineer.show();
+          this.checkMode = true;
+         this.typeLink = 'تعديل';
+         this.userSer.onGetUserData(this.joinId, 'editJo').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.joinUsForm.patchValue({
+              name: responce['user'].name,
+              name_en: responce['user'].name_en,
+              date_of_employment_hij: responce['user'].date_of_employment_hij,
+              adminstration_id: responce['user'].adminstration_id,
+            });
+            this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
+              console.log(this.urlImg);
+              this.spineer.hide();
+          }
+         );
+         
+        }
+      }
+    );
+
+  }
+
+
+
+  onFileChanges(event) {
+    console.log(event);
+    this.imageBase64 = event[0].base64;
+    this.photoType = event[0].type.split('/');
+    console.log(this.photoType[1]);
+    //console.log(this.imageBase64);
+    this.checkChangeImage = true;
+    this.checkValidImg = false;
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+
+
+  onSubmittedForm() {
+    console.log(this.joinUsForm.value);
+    const formData = this.joinUsForm.value;
+
+    if(this.checkChangeImage){
+      formData['photo'] = this.imageBase64;
+      formData['photo_type'] = this.photoType[1];
+    } else {
+      delete formData.photo;
+      delete formData.photo_type; 
+      this.photoEdit = false;
+      console.log(formData);
+    }
+
+    
+    if(this.checkMode) {
+      alert(this.checkMode);
+      formData['id'] = this.joinId;
+      console.log(formData);
+      if(this.imageBase64 == '' && this.photoEdit == true) {
+        this.toastr.warning('قم باختيار صوره !');
+      } else {
+        this.userSer.onEditUser(formData, 'joinUs').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل');
+          }
+        );
+      }
+    } else {
+
+      if(this.imageBase64 == '') {
+        this.toastr.warning('قم باختيار صوره !');
+      } else {
+        this.userSer.addUser(formData, 'joinUs').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الإنشاء');
+          }
+        );
+      }
+    }
+
+  }
+
+}

src/app/dashboard/dasboard-content.html

@@ -0,0 +1,5 @@
+<app-header></app-header>
+    <div class="routerLinkContainer-w" [style.min-height.px]="myInnerHeight">
+        <router-outlet></router-outlet>
+    </div>
+<app-footer></app-footer>

src/app/dashboard/dashboard-content.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-dashboard-content',
+  templateUrl: './dasboard-content.html',
+  styleUrls: ['./dashboard-content.css']
+})
+export class DashboardContent implements OnInit {
+
+  constructor() { }
+  myInnerHeight = window.innerHeight;
+  ngOnInit() {}
+
+}

src/app/dashboard/dashboard/dashboard.component.css

@@ -0,0 +1,57 @@
+.dashboard {
+    width: 100%;
+    margin-top: -5px;
+    padding: 40px 0;
+}
+
+.dashboardItem-w {
+    width: 100%;
+    height: 150px;
+    padding: 5px;
+    background-color: #bda380;
+    border-radius: 20px;
+    color: #b6e2e5;
+    font-family: 'Cairo', sans-serif;
+}
+
+.dashboardItem-w h1 {
+    font-size: 17px;
+    margin: 5px 0;
+    line-height: 140px;
+}
+.mainFooter-w {
+    width: 100%;
+    height: 288px;
+    background: url('../../../assets/image/footer.png') no-repeat center center;
+    background-size: cover;
+    margin-top: -13px;
+    position: relative;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+@media(max-width: 767px){
+    .dashboardItem-w {
+        width: 100%;
+    }
+
+    .dashboardItem-w h1 {
+        font-size: 15px;
+    } 
+}
+
+@media(min-width: 768px) and (max-width: 991px) {
+    .dashboardItem-w {
+        width: 100%;
+    }
+    .dashboardItem-w h1 {
+        font-size: 16px;
+    }
+}
+
+@media(min-width: 992px) {
+    .dashboardItem-w h1 {
+        font-size: 20px;
+    }
+}
+

src/app/dashboard/dashboard/dashboard.component.html

@@ -0,0 +1,18 @@
+
+<div class="dashboard" [style.min-height.px]="myInnerHeight">
+  <div class="container">
+    <div class="row">
+      <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+        <div class="dashboardItem-w text-center" style="cursor:pointer;" (click)="getDataService(service)">
+          <h1>{{service.name}}</h1>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+

src/app/dashboard/dashboard/dashboard.component.ts

@@ -0,0 +1,142 @@
+import { HttpClient } from '@angular/common/http';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { UserService } from '../../shared/user.service';
+import { Subscription } from 'rxjs';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css']
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+
+  idUser: number; //id user
+  myInnerHeight = window.innerHeight;
+  services = [];
+  pages = [];
+
+  subscriptionUSer: Subscription;
+  constructor(private authService: AuthServiceService, 
+    private userservice: UserService, 
+    private route: ActivatedRoute, 
+    private http: HttpClient, private router: Router,
+    private spinner: NgxSpinnerService) { }
+
+  ngOnInit() {
+    this.spinner.show();//spinner
+    //show / hide notification search in header
+    this.authService.notificationLogin = true;
+    this.authService.showSearchHeader = false;
+    this.authService.showHeaderLogin = false;
+    this.authService.showHeaderDashBoard = true;
+    this.authService.showDashboardHeader = true;
+    this.authService.internalHeader = false;
+
+    console.log(this.authService.isAuthenticated());
+    //get profile data
+    this.userservice.getUserDataProfile();
+    
+    //catch id user
+    this.subscriptionUSer =  this.route.params.subscribe(
+        (params: Params) => {
+          this.idUser = params['id'];
+        }
+      );
+
+      //get rules of users
+      this.userservice.getServicesData(this.idUser).subscribe(
+        (responce) => { 
+          this.services = responce['services'];
+          console.log(this.services);
+          this.spinner.hide();
+        },
+        (error) => {console.log(error)}
+      );
+  }
+
+  getDataService(dataService){
+
+    console.log('dataServiccce', dataService);
+    console.log(dataService.id);
+    console.log(this.idUser);
+
+    if(dataService.id == 1) {
+      //خدمه الصلاحيات
+      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+        this.pages = responce['pages'];
+        //this.pages[0].active = 1;
+          console.log(this.pages);
+          if(this.pages[0].id == 1) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id]);
+          }else if(this.pages[0].id == 2) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/roles/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 3) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departments/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 4) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/sections/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 5) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reports/' + this.pages[0].id]);
+          }
+          this.spinner.hide();
+        },
+        (error) => {console.log(error)}
+      );
+
+    } else if(dataService.id == 6) {
+      //خدمه اداره المحتوي
+      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.pages = responce['pages'];
+          console.log(this.pages);
+          if(this.pages[0].id == 6) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 10) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mangementList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 8){
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/eventsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 9) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/joinUs/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 7) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/externalsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 11) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/achievementsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 12) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/tabs/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 13) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/newsList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 16) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/footerList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 14) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/internalServicesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 15){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/lecturesList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 17) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/mainMenuList/' + this.pages[0].id]);
+          }
+          this.spinner.hide();
+        },
+        (error) => {console.log(error)}
+      );
+    }
+   
+   
+  }
+
+  ngOnDestroy() {
+    this.subscriptionUSer.unsubscribe();
+  }
+
+}

src/app/dashboard/department/add-department/add-department.component.css

@@ -0,0 +1,14 @@
+.addDepartment-w {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+.addDepartment-w label {
+    float: right;
+    margin-right: 5px;
+}
+
+

src/app/dashboard/department/add-department/add-department.component.html

@@ -0,0 +1,62 @@
+<div class="addDepartment-w">
+
+    
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه الصلاحيات / </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">الادارات / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px">  {{typeLink}} </li>
+          </ul>
+          <hr class="hr">
+        </div>
+      </div>
+
+    <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+        <div class="row">
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="name">الأسم <span class="spanReqired-w">*</span></label>
+              <input type="text" name="name" class="form-control" ngModel #name="ngModel" placeholder="الأسم" [ngModel]="admin.name" required/>
+            </div>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
+              <input type="email" class="form-control" name="email" placeholder="الإيميل" appEnglishCharacters ngModel email #email="ngModel" [ngModel]="admin.email" required/>
+            </div>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="phone">الهاتف</label>
+              <input type="phone" class="form-control" name="phone" ngModel #phone="ngModel" [ngModel]="admin.phone"/>
+            </div>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="switch_phone">الهاتف البديل</label>
+              <input type="phone" class="form-control" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="admin.switch_phone"/>
+            </div>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="status">الحاله</label>
+              <select name="status" class="form-control" [ngModel]="admin.status">
+                <option value="1">Active</option>
+                <option value="0">InActive</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+            <div class="form-group">
+              <label for="description">الوصف <span class="spanReqired-w">*</span></label>
+              <textarea cols="3" name="description" class="form-control" ngModel #description="ngModel" [ngModel]="admin.description" required>
+              </textarea>
+            </div>
+          </div>
+      </div>
+      <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid ">حفظ</button>
+    </form>
+  </div>
+</div>

src/app/dashboard/department/add-department/add-department.component.ts

@@ -0,0 +1,117 @@
+import { Location } from '@angular/common';
+import { DepartmentService } from './../../../shared/department.service';
+import { UserService } from './../../../shared/user.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+
+@Component({
+  selector: 'app-add-department',
+  templateUrl: './add-department.component.html',
+  styleUrls: ['./add-department.component.css']
+})
+export class AddDepartmentComponent implements OnInit {
+
+  constructor(private authService: AuthServiceService,
+      private userService: UserService,
+      private departmentSer: DepartmentService,
+      private spinner: NgxSpinnerService,
+      private toastr: ToastrService,
+      private router: Router,
+      private authSer: AuthServiceService,
+      private route: ActivatedRoute,
+      private location: Location) { }
+
+  checkEditMode: boolean = false;
+  departId: number;
+
+  admin = {
+    name: '',
+    description: '',
+    email: '',
+    phone: '',
+    switch_phone: '',
+    status: '1',
+  }
+
+  typeLink: string = '';
+
+  @ViewChild('f') addDepertmentForm;
+
+  ngOnInit() {
+    this.userService.getUserDataProfile();
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeAdminMode'] == 'edit') {
+          this.typeLink = 'تعديل';
+          this.spinner.show();
+          this.checkEditMode = true;
+          this.departId = params['editAdminId'];
+          this.departmentSer.getDataAdmin(this.departId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.admin.name = responce['adminstration'].name;
+              this.admin.email = responce['adminstration'].email;
+              this.admin.phone = responce['adminstration'].phone;
+              this.admin.switch_phone = responce['adminstration'].switch_phone;
+              this.admin.status = responce['adminstration'].status;
+              this.admin.description = responce['adminstration'].description;
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    )
+  }
+
+  //add function 
+  onSubmitted() {
+    console.log(this.addDepertmentForm.value);
+    if(this.checkEditMode) {
+      this.departmentSer.editAdmin(this.addDepertmentForm, this.departId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل');
+          this.location.back();
+        },
+        (error) => {
+          this.toastr.error('خطأ تعديل');
+          console.log(error);
+        }
+      );
+    } else {
+      this.departmentSer.addDepartment(this.addDepertmentForm).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ الاضافه !');
+        }
+      );
+    }
+  }
+
+}

src/app/dashboard/department/department-list/department-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/department/department-list/department-list.component.html

@@ -0,0 +1,72 @@
+<div class="container">
+    <div class="row">
+      <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه الصلاحيات / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px">الإدارات</li>
+          </ul>
+        <hr class="hr">
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAddDepart()" *ngIf="authSer.showAddBtn">إنشاء</button>
+          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDeleteDeparts()" *ngIf="authSer.showDeleteBtn">حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث" class="form-control searchInput-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-6">
+        <div class="form-group">
+          <span class="spanSelect-w">أظهر
+            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="10000">المزيد</option>
+              <option value="20">20</option>
+            </select>
+            من العناصر
+          </span>
+        </div>
+      </div>
+      <div class="col-6">
+      
+      </div>
+    </div>
+  
+    <table class="table table-bordered">
+      <thead class="headBackground-w checkAll-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w" for="customCheck" style="margin-bottom:20px;"></label>
+            </div>
+          </th>
+          <th>الاسم</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let department of departmentsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{department.id}}" [(ngModel)]="department.selected" [value]='department' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{department.id}}" style="color:#2a2a2a"></label>
+            </div>
+          </td>
+          <td>{{department.name}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(department.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+  

src/app/dashboard/department/department-list/department-list.component.ts

@@ -0,0 +1,222 @@
+import { UserService } from './../../../shared/user.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { DepartmentService } from './../../../shared/department.service';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-department-list',
+  templateUrl: './department-list.component.html',
+  styleUrls: ['./department-list.component.css']
+})
+export class DepartmentListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,
+    private departService: DepartmentService,
+    private router: Router,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private userSer: UserService,
+    private toastr: ToastrService) { }
+
+  count: number;
+  departmentsList = [];
+  departsId = [];
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  pageId: number;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  ngOnInit() {
+    
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+        
+    this.route.params.subscribe(
+      (params:Params) => {
+        console.log(params['departsPageId']);
+        this.pageId = params['departsPageId'];
+      },
+      (error) => {console.log(error)}
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].name == 'الإدارات') {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_adminstration'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_adminstration'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_adminstration'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no adminstrations');
+              }
+            }
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    this.departService.getDeparmentsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.departmentsList = responce['adminstrations'];
+        for (var i = 0; i < this.departmentsList.length; i++) {
+          this.departmentsList[i].selected = false;
+        }
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.departmentsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  };
+
+
+  //change page 
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.departmentsList = [];
+    this.departService.getDeparmentsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.departmentsList = responce['adminstrations'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+    //make all checkbox of user checked
+    selectAll() {
+      for (var i = 0; i < this.departmentsList.length; i++) {
+        this.departmentsList[i].selected = this.selectedAll; 
+      }
+    };
+  
+    checkIfAllSelected() {
+      this.selectedAll = this.departmentsList.every(function(item:any) {
+          return item.selected == true;
+        });
+    };
+  
+
+    //filtter function
+    filtterFunc(data) {
+      this.departmentsList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      console.log('search curent page', this.currentPage);
+      console.log('search page id', this.pageId);
+      this.departService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.departmentsList = responce['adminstrations'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    };
+
+    onGetValue(event) {
+      this.spinner.show();
+      this.departmentsList = [];
+      this.dataTableNumber = event.target.value;
+      this.departService.getDeparmentsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.departmentsList = responce['adminstrations'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+
+    //deleted function
+    onDeleteDeparts() {
+      this.departsId = [];
+      for(let i = 0; i < this.departmentsList.length; i++) {
+        if(this.departmentsList[i].selected == true) {
+          this.departsId.push(this.departmentsList[i].id);
+        }
+      }
+
+      console.log(this.departsId);
+
+      this.departService.deleteDepart(this.departsId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم المسح');
+          window.location.reload();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        },
+      );
+    };
+
+
+    onAddDepart() {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'addAdminstration']);
+    }
+
+    onEdit(departmentIdEit: number) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'editAdminstration/edit/' + departmentIdEit]);
+    }
+
+    
+
+}

src/app/dashboard/events/add-event/add-event.component.css

@@ -0,0 +1,21 @@
+.rightW {
+    display: block;
+    float: right;
+    margin: 20px 0;
+}
+
+
+.submittedW {
+    margin: 20px 0;
+    float: right;
+}
+
+.arrayGroupForm-w {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+input {
+    font-size: 13px !important;
+}

src/app/dashboard/events/add-event/add-event.component.html

@@ -0,0 +1,96 @@
+<div class="addHospital-w">
+    <div class="container">
+      
+      <div class="row" style="margin-bottom: 30px;">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه إداره المحتوي / </li>
+              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">مشاركه اللحظات / </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+            </ul>
+            <hr class="hr">
+          </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="event.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="event.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="ranking" [ngModel]="event.ranking" id="ranking" required>  
+                    <option value="10000">المزيد</option>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                  </select>
+                    <!-- <span *ngIf="!name.valid && name.touched"></span>  -->
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="display_location" style="float: right; margin-right: 5px"> الصفحه <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="display_location" [ngModel]="event.display_location" id="display_location" required>  
+                    <option value="internal">داخليه</option>
+                    <option value="external">خارجيه</option>
+                    <option value="both">كلاهما</option>
+                  </select>
+                </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <div class="form-group">
+                      <label for="type" style="float: right;margin-right: 5px"> النوع <span class="spanReqired-w">*</span></label>
+                      <select class="form-control" name="type" [ngModel]="event.type" id="type" required>  
+                        <option value="1">تهاني</option>
+                        <option value="0">تعازي</option>
+                      </select>
+                    </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="event.status" id="status" required>  
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="date" style="float: right; margin-right: 5px">التاريخ</label>
+                <input type="date" class="form-control" [ngModel]="event.date" id="date" name="date" />
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                  <label for="time" style="float: right; margin-right: 5px">الوقت</label>
+                  <input type="time" class="form-control" [ngModel]="event.time" id="time" name="time" />
+              </div>
+
+            </div>
+            
+            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+  
+          </form>
+  
+        </div>
+      </div>
+    </div>
+  </div>
+  

src/app/dashboard/events/add-event/add-event.component.ts

@@ -0,0 +1,121 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { EventService } from '../../../shared/event.service';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { FormGroup, NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-event',
+  templateUrl: './add-event.component.html',
+  styleUrls: ['./add-event.component.css']
+})
+
+
+export class AddEventComponent implements OnInit {
+ 
+  @ViewChild('f') eventForm: NgForm;
+  typeMode: boolean = false;
+  typeLink: string = '';
+  eventId: number;
+
+  event = {
+    name: '',
+    name_en: '',
+    ranking: '',
+    display_location: '',
+    type: '',
+    status: '',
+    date: '',
+    time: '',
+  }
+  
+
+  constructor(private eventService: EventService,
+    private userService: UserService,
+    private location: Location,
+    private toastr: ToastrService,
+    private authSer: AuthServiceService,
+    private route: ActivatedRoute, 
+    private spineer: NgxSpinnerService) { }
+
+  ngOnInit() {
+    
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeEventMode'] == 'edit') {
+          this.typeLink = 'تعديل';
+          this.spineer.show();
+          this.typeMode = true;
+          this.eventId = params['editEventId'];
+          this.eventService.getEventData(this.eventId).subscribe(
+            (responce) => {
+              console.log(responce);
+              const eventData = responce['event'][0];
+              console.log(eventData);
+              this.event.name = eventData.name;
+              this.event.name_en = eventData.name_en;
+              this.event.ranking = eventData.ranking;
+              this.event.display_location = eventData.display_location;
+              this.event.type = eventData.type;
+              this.event.status = eventData.status;
+              this.spineer.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    );
+  }
+
+  //submitted form
+  onSubmitted() {
+
+    console.log(this.eventForm.value);
+    this.eventForm.value.event_time = this.eventForm.value.date + this.eventForm.value.time;
+    delete this.eventForm.value.time;
+
+    console.log(this.eventForm.value); 
+    if(this.typeMode) {
+      this.eventService.editEvent(this.eventForm.value , this.eventId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.toastr.error('حدث خطأ !');
+          console.log(error);
+        }
+      );
+    } else {
+      this.eventService.addEvent(this.eventForm.value).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.toastr.error('حدث خطأ !');
+          console.log(error);
+        }
+      );
+    }
+  }
+
+}

src/app/dashboard/events/events.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/events/events.component.html

@@ -0,0 +1,90 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-unstyled titileLi-w">
+        <li class="headingText-w">خدمه إداره المحتوي / </li>
+        <li class="headingText-w activeLi-w" style="margin-right:5px">مشاركه اللحظات</li>
+      </ul>
+      <hr class="hr">
+    </div>
+  </div>
+
+
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+  </div>
+  
+  <table class="table table-bordered">
+    <thead class="headBackground-w">
+      <tr>
+        <th>
+          <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+          </div>
+        </th>
+        <th>الاسم</th>
+        <th>الترتيب</th>
+        <th>موقع العرض</th>
+        <th>النوع</th>
+        <th *ngIf="authSer.showEditBtn">تعديل</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let event of eventsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+        <td>
+          <div class="custom-control custom-checkbox centerIneerItem">
+            <input type="checkbox" class="custom-control-input" id="{{event.id}}" [(ngModel)]="event.selected" [value]='event' (change)="checkIfAllSelected();">
+            <label class="custom-control-label disblayBlock-w" for="{{event.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          </div>
+        </td>
+        <td>{{event.name}}</td>
+        <td>
+          {{event.ranking}}
+          <!-- <select class="form-control" [ngModel]="event.ranking" (change)="changeRanking($event, event.id)">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+          </select> -->
+        </td>
+        <td>{{event.display_location == 'both' ? 'كلاهما' : event.display_location == 'internal' ? 'الصفحه الداخليه' : event.display_location == 'external' ? 'الصفحه الخارجيه' : 'No'}}</td>
+        <td>{{event.type == '0' ? 'التعازي' : event.type == '1' ? 'التهاني' : 'No'}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(event.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+</div>

src/app/dashboard/events/events.component.ts

@@ -0,0 +1,231 @@
+import { HttpClient } from '@angular/common/http';
+import { EventService } from './../../shared/event.service';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { UserService } from './../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-events',
+  templateUrl: './events.component.html',
+  styleUrls: ['./events.component.css']
+})
+export class EventsComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private http: HttpClient,
+    private eventService: EventService,
+    private router: Router) { }
+
+    pageId: number;
+    eventsList = [];
+    eventsListIds = [];
+    count: number;
+    perPagePagenation: number;
+    p: number[] = [];
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['eventPageId'];
+      }
+    );
+
+    //to show / hide permissions
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 8) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_event'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_event'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_events'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.eventService.getEventsList(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.eventsList = responce['events'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.eventsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.eventsList.length; i++) {
+      this.eventsList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.eventsList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.eventsList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    this.eventService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.eventsList = responce['events'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+  changeRanking(event, id) {
+    const data = {
+      id: id,
+      ranking: event.target.value,
+    };
+    console.log(data);
+    this.http.post(this.authSer.pathApi + '/rank_event', data).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.eventService.getEventsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.eventsList = responce['events'];
+            console.log(this.eventsList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      },
+      (error) => {console.log(error)},
+    );
+  };
+
+//determine the list count from select element 
+onGetValue(event) {
+  this.spinner.show();
+  this.eventsList = [];
+  this.dataTableNumber = event.target.value;
+  this.eventService.getEventsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.eventsList = responce['events'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+}
+
+  onDelete() {
+    this.eventsListIds = [];
+    for(let i = 0; i < this.eventsList.length; i++) {
+      if(this.eventsList[i].selected == true) {
+        this.eventsListIds.push(this.eventsList[i].id);
+      }
+    }
+
+    console.log(this.eventsListIds);
+
+  this.eventService.deleteEvent(this.eventsListIds).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.toastr.success('تم الحذف');
+      window.location.reload();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    },
+  );
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addEvent');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addEvent']);
+  }
+
+  //edit function
+   onEdit(editEventID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Event/edit/' + editEventID]);
+  }
+
+}

src/app/dashboard/external-services/add-external/add-external.component.css

@@ -0,0 +1,91 @@
+.imgProfile {
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
+    border-radius: 20px 20px 0 0;
+}
+.rightW {
+    display: block;
+    margin: 20px 0;
+}
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    top: 10px;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+input {
+    font-size: 13px !important;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.regesterBtn-w {
+    width: 200px;
+    display: block;
+    margin:  20px auto;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}

src/app/dashboard/external-services/add-external/add-external.component.html

@@ -0,0 +1,77 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <div class="row" style="margin-bottom: 30px;">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه إداره المحتوي / </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الخارجيه / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+          </ul>
+          <hr class="hr">
+        </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+
+        <form (ngSubmit)="onSubmitted()" #f="ngForm">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+              <div class="form-group text-center imgContainer">
+                  <img [src]="urlImg" class="imgProfile" height="200"> 
+                  <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                  <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+              </div>
+              <span *ngIf="checkValidImg" style="position: absolute; right:0; bottom:0;color: red">must be in 'png' format</span>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه  <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" placeholder="الاسم باللغه العربيه" name="name" ngModel [ngModel]="external.name" #name="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه  <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name_en" placeholder="الاسم باللغه الانجليزيه" name="name_en" ngModel [ngModel]="external.name_en" #name="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="link" style="float: right; margin-right: 5px">الرابط  <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="link" name="link" placeholder="الروابط" ngModel [ngModel]="external.link" #link="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="ranking" style="float: right; margin-right: 5px">الترتيب  <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="ranking" [ngModel]="external.ranking" id="ranking" required>  
+                  <option value="10000">المزيد</option>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select>
+              </div>
+            </div>
+  
+            <div class="col-12 col-sm-12 col-md-4">
+              <label for="status" style="float: right; margin-right: 5px">الحاله  <span class="spanReqired-w">*</span></label>
+              <select class="form-control" name="status" [ngModel]="external.status" id="status" required>  
+                <option value="1">فعال</option>
+                <option value="0">غير فعال</option>
+              </select>
+            </div>
+          </div>
+          
+          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+
+        </form>
+
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/external-services/add-external/add-external.component.ts

@@ -0,0 +1,160 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { ExternalSerService } from './../../../shared/external-ser.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-external',
+  templateUrl: './add-external.component.html',
+  styleUrls: ['./add-external.component.css']
+})
+export class AddExternalComponent implements OnInit {
+
+  @ViewChild('f') externalFormData: NgForm;
+
+  urlImg: string =  '../../assets/image/avatar.png';
+  imageBase64: string = '';
+  photoType: string = '';
+  checkChangeImage: boolean = false;
+  checkValidImg: boolean = true;
+  typeMode: boolean = false;
+  photoEdit: boolean = true;
+  typeLink: string = '';
+  externalId: number;
+
+  external = {
+    name: '',
+    name_en: '',
+    link: '',
+    status: '',
+    ranking: '',
+  };
+
+  constructor(private toastr: ToastrService, 
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService,
+    private authService: AuthServiceService,
+    private externalService: ExternalSerService) { }
+
+  ngOnInit() {
+    
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeExternalMode'] == 'edit') {
+          this.spinner.show();
+          this.typeMode = true;
+          this.typeLink = 'تعديل';
+          this.externalId = params['editExternalId'];
+          this.externalService.getExternalData(this.externalId).subscribe(
+            (responce) => {
+              console.log(responce['external_service']);
+              this.external.name = responce['external_service'].name;
+              this.external.name_en = responce['external_service'].name_en;
+              this.external.link = responce['external_service'].link;
+              this.external.status = responce['external_service'].status;
+              this.external.ranking = responce['external_service'].ranking;
+              if(responce['external_service'].photo) {
+                this.checkValidImg = false;
+                this.urlImg = this.authService.pathImg + responce['external_service'].photo;
+              }
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'أنشاء جديد';
+        }
+      }
+    )
+  };
+
+
+
+  onFileChanges(event) {
+    console.log(event);
+    this.imageBase64 = event[0].base64;
+    this.photoType = event[0].type.split('/');
+    console.log(this.photoType[1]);
+    this.checkChangeImage = true;
+    this.checkValidImg = false;
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+ //on submitted
+ onSubmitted() {
+  const formData = this.externalFormData.value;
+  if(this.checkChangeImage){
+    formData['photo'] = this.imageBase64;
+    formData['photo_type'] = this.photoType[1];
+  } else {
+    delete formData.photo;
+    delete formData.photo_type; 
+    this.photoEdit = false;
+    console.log(formData);
+  }
+  if(this.typeMode){
+    if(this.photoType[1] != 'png' && this.photoEdit == true) {
+      this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+    } else if(this.imageBase64 == '' && this.photoEdit == true){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      this.externalService.editExternal(formData, this.externalId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في التعديل !');
+        }
+      );
+    }
+  } else {
+    if(this.photoType[1] != 'png') {
+      this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+    } else if(this.imageBase64 == ''){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      this.externalService.addExternal(formData).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الحفظ !');
+        }
+      );
+    }
+  }
+ }
+
+
+}

src/app/dashboard/external-services/external-list/external-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/external-services/external-list/external-list.component.html

@@ -0,0 +1,86 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه الصلاحيات / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">الخدمات الخارجيه</li>
+        </ul>
+      <hr class="hr">
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+  </div>
+  
+  <table class="table table-bordered">
+    <thead class="headBackground-w">
+      <tr>
+        <th>
+          <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+          </div>
+        </th>
+        <th>الاسم</th>
+        <th>الترتيب</th>
+        <th> الحاله</th>
+        <th *ngIf="authSer.showEditBtn">تعديل</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let external of externalsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+        <td>
+          <div class="custom-control custom-checkbox centerIneerItem">
+            <input type="checkbox" class="custom-control-input" id="{{external.id}}" [(ngModel)]="external.selected" [value]='external' (change)="checkIfAllSelected();">
+            <label class="custom-control-label disblayBlock-w" for="{{external.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          </div>
+        </td>
+        <td>{{external.name}}</td>
+        <td>
+          {{external.ranking}}
+          <!-- <select class="form-control" [ngModel]="external.ranking" (change)="changeRanking($event, external.id)">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+          </select> -->
+        </td>
+        <td>{{external.status == '0' ? 'غير نشط' : external.status == '1' ? 'نشط' : 'not found' }}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(external.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+</div>

src/app/dashboard/external-services/external-list/external-list.component.ts

@@ -0,0 +1,254 @@
+import { HttpClient } from '@angular/common/http';
+import { ExternalSerService } from './../../../shared/external-ser.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { UserService } from '../../../shared/user.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-external-list',
+  templateUrl: './external-list.component.html',
+  styleUrls: ['./external-list.component.css']
+})
+export class ExternalListComponent implements OnInit {
+
+  externalId: number;
+  externalsList = [];
+  externalsListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private externalService: ExternalSerService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+    
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.externalId = params['externalPageId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 7) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_external_service'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_external_service'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_external_services'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.externalService.getExternalsList(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.externalsList = responce['external_services'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.externalsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.externalsList.length; i++) {
+      this.externalsList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.externalsList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.externalsList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.externalId);
+    this.externalService.getDataUSerSearchBar(dataSearch, this.externalId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.externalsList = responce['external_services'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+    //change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.externalsList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.externalService.getExternalsList(this.externalId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.externalsList = responce['external_services'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.externalsList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+
+  changeRanking(event, id) {
+    const data = {
+      id: id,
+      ranking: event.target.value,
+    };
+    console.log(data);
+    this.http.post(this.authSer.pathApi + '/rank_external_service', data).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.externalService.getExternalsList(this.externalId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.externalsList = responce['external_services'];
+            console.log(this.externalsList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      },
+      (error) => {console.log(error)},
+    );
+  };
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.externalsList = [];
+    this.dataTableNumber = event.target.value;
+    this.externalService.getExternalsList(this.externalId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.externalsList = responce['external_services'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+  
+  onDelete() {
+    this.externalsListIds = [];
+    for(let i = 0; i < this.externalsList.length; i++) {
+      if(this.externalsList[i].selected == true) {
+        this.externalsListIds.push(this.externalsList[i].id);
+      }
+    }
+
+    console.log(this.externalsListIds);
+
+    this.externalService.deleteEvent(this.externalsListIds).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addExternal');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addExternal']);
+  }
+
+  //edit function
+   onEdit(editEventID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'externalService/edit/' + editEventID]);
+  }
+  
+
+}

src/app/dashboard/footer/add-footer/add-footer.component.css

@@ -0,0 +1,68 @@
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    top: 10px;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+.rightW {
+    display: block;
+    margin: 20px 0;
+}

src/app/dashboard/footer/add-footer/add-footer.component.html

@@ -0,0 +1,76 @@
+<div class="addHospital-w">
+    <div class="container">
+      
+      <div class="row" style="margin-bottom: 30px;">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه إداره المحتوي / </li>
+              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">  الفوتر / </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+            </ul>
+            <hr class="hr">
+          </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+  
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                    <img [src]="urlImg" class="imgProfile" height="200"> 
+                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                </div>
+                <span *ngIf="checkValidImg" style="color: red; position: absolute; right:0;bottom:0">must be in 'png' format</span>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px">الأسم باللغه العربيه  <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name" name="name" placeholder="الأسم باللغه العربيه" ngModel [ngModel]="footer.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                  <div class="form-group">
+                    <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الإنجليزيه  <span class="spanReqired-w">*</span></label>
+                      <input type="text" class="form-control" id="name_en" placeholder="الأسم باللغه الأنجليزيه" name="name_en" ngModel [ngModel]="footer.name_en" #name="ngModel" required/>
+                  </div>
+                </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="link" style="float: right; margin-right: 5px">الرابط  <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="link" name="link" ngModel [ngModel]="footer.link" #link="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4">
+                  <div class="form-group">
+                    <label for="type" style="float: right; margin-right: 5px">النوع</label>
+                    <select id="type" name="type" class="form-control" [ngModel]="footer.type" required>
+                        <option value="0">قسم الروابط</option>
+                        <option value="1">قسم التواصل</option>
+                        <option value="2">قسم الجوائز</option>
+                    </select>
+                  </div>
+              </div>  
+             
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله  <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="footer.status" id="status" required>  
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+            </div>
+            
+            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+  
+          </form>
+  
+        </div>
+      </div>
+    </div>
+  </div>
+  

src/app/dashboard/footer/add-footer/add-footer.component.ts

@@ -0,0 +1,167 @@
+import { FooterService } from './../../../shared/footer.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { NgForm } from '@angular/forms';
+@Component({
+  selector: 'app-add-footer',
+  templateUrl: './add-footer.component.html',
+  styleUrls: ['./add-footer.component.css']
+})
+export class AddFooterComponent implements OnInit {
+
+  @ViewChild('f') footerFormData: NgForm;
+
+  urlImg: string =  '../../assets/image/avatar.png';
+  imageBase64: string = '';
+  photoType: string = '';
+  checkChangeImage: boolean = false;
+  checkValidImg: boolean = true;
+  typeMode: boolean = false;
+  photoEdit: boolean = true;
+  typeLink: string = '';
+  externalId: number;
+
+  footer = {
+    name: '',
+    name_en: '',
+    link: '',
+    status: '',
+    type: ''
+  };
+
+  constructor(private toastr: ToastrService, 
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private footerService: FooterService) { }
+
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeFooterMode'] == 'edit') {
+          this.typeLink = 'تعديل';
+          this.spinner.show();
+          this.typeMode = true;
+          this.externalId = params['editFooterId'];
+          this.footerService.getFooterData(this.externalId).subscribe(
+            (responce) => {
+              console.log(responce['footer']);
+              this.footer.name = responce['footer'].name;
+              this.footer.name_en = responce['footer'].name_en;
+              this.footer.link = responce['footer'].link;
+              this.footer.status = responce['footer'].status;
+              this.footer.type = responce['footer'].type;
+              if(responce['footer'].photo) {
+                this.checkValidImg = false;
+                this.urlImg = this.authSer.pathImg + responce['footer'].photo;
+              }
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    )
+  }
+
+
+
+  onFileChanges(event) {
+    console.log(event);
+    this.imageBase64 = event[0].base64;
+    this.photoType = event[0].type.split('/');
+    console.log(this.photoType[1]);
+    //console.log(this.imageBase64);
+    this.checkChangeImage = true;
+    this.checkValidImg = false;
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+ //on submitted
+ onSubmitted() {
+  const formData = this.footerFormData.value;
+  if(this.checkChangeImage){
+    formData['photo'] = this.imageBase64;
+    formData['photo_type'] = this.photoType[1];
+  } else {
+    delete formData.photo;
+    delete formData.photo_type; 
+    this.photoEdit = false;
+    console.log(formData);
+  }
+  if(this.typeMode){
+    if(this.photoType[1] != 'png' && this.photoEdit == true) {
+      this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+    } else if(this.imageBase64 == '' && this.photoEdit == true){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      this.footerService.editFooter(formData, this.externalId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في التعديل !');
+        }
+      );
+    }
+  } else {
+    if(this.photoType[1] != 'png') {
+      this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+    } else if(this.imageBase64 == ''){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      // formData['photo'] = this.imageBase64;
+      // formData['photo_type'] = this.photoType[1];
+      this.footerService.addFooter(formData).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الحفظ !');
+        }
+      );
+    }
+  }
+  
+
+ }
+
+
+}

src/app/dashboard/footer/footer-list/footer-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/footer/footer-list/footer-list.component.html

@@ -0,0 +1,76 @@
+<div class="container">
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> الفوتر</li>
+        </ul>
+        <hr class="hr">
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث بالاسم" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="form-group">
+          <span class="spanSelect-w">أظهر
+            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+            </select>
+            من العناصر
+          </span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6">
+      
+      </div>
+    </div>
+    
+    <table class="table table-bordered">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            </div>
+          </th>
+          <th>الاسم</th>
+          <th>النوع</th>
+          <th> الحاله</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let footer of footerList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{footer.id}}" [(ngModel)]="footer.selected" [value]='footer' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{footer.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            </div>
+          </td>
+          <td>{{footer.name}}</td>
+          <td>{{footer.type == 0 ? 'قسم الروابط' :  footer.type == 1 ? 'قسم التواصل' : footer.type == 2 ? 'قسم الجوائز' : 'N/A' }}</td>
+          <td>{{footer.status == 0 ? 'غير فعال' : footer.status == 1 ? 'فعال' : 'N/A'}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(footer.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+  

src/app/dashboard/footer/footer-list/footer-list.component.ts

@@ -0,0 +1,231 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { FooterService } from './../../../shared/footer.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-footer-list',
+  templateUrl: './footer-list.component.html',
+  styleUrls: ['./footer-list.component.css']
+})
+export class FooterListComponent implements OnInit {
+
+
+  footerId: number;
+  footerList = [];
+  footerListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private footerService: FooterService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+    
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.footerId = params['footerPageId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 16) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_footer'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_footer'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_footers'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.footerService.getFooterList(this.footerId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.footerList = responce['footers'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.footerList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.footerList.length; i++) {
+      this.footerList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.footerList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.footerList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.footerId);
+    this.footerService.getDataUSerSearchBar(dataSearch, this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.footerList = responce['footers'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+    //change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.footerList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.footerService.getFooterList(this.footerId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.footerList = responce['footers'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.footerList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+
+      //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.footerList = [];
+    this.dataTableNumber = event.target.value;
+    this.footerService.getFooterList(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.footerList = responce['footers'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+
+
+
+
+  onDelete() {
+    this.footerListIds = [];
+    for(let i = 0; i < this.footerList.length; i++) {
+      if(this.footerList[i].selected == true) {
+        this.footerListIds.push(this.footerList[i].id);
+      }
+    }
+
+    console.log(this.footerListIds);
+
+    this.footerService.deleteFooter(this.footerListIds).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addFooter');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addFooter']);
+  }
+
+  //edit function
+   onEdit(editEventID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'footer/edit/' + editEventID]);
+  }
+  
+
+}

src/app/dashboard/header/header.component.css

@@ -0,0 +1,209 @@
+.header {
+    width: 100%;
+    /* height: 40px; */
+    display: inline-block;
+    background-color: #d0d0d0;
+    direction: rtl;
+    padding: 5px 0;
+    font-family: 'Cairo', sans-serif;
+    overflow: visible;
+    color: #fff;
+}
+
+.header p{
+  text-shadow: 2px 2px 4px #000000;
+}
+
+.header .searchDiv-w {
+    width: 100%;
+    height: 100%;
+}
+
+.header .searchDiv-w input {
+    color: #888;
+    border-radius: 0;
+    height: calc(2rem + 2px);
+    margin-top: 10px;
+}
+
+.header .notificationDiv-w {
+    width: 100%;
+    height: 100%;
+}
+
+.header .notificationDiv-w img{
+    width: 35px;
+    height: 35px;
+    border: 1px solid #15a498;
+    float: right;
+    margin: 0 10px;
+    margin-top: -5px;
+}
+
+.header .notificationDiv-w button {
+    border: none;
+    color: #252525;
+    text-align: right;
+}
+
+.header .notificationDiv-w .buttonDropDown-w,
+.header .notificationDiv-w .buttonDropDown-w:focus {
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    box-shadow: none;
+}
+
+.header .notificationDiv-w button:hover {
+    background-color: transparent;
+}
+
+.header .notificationDiv-w button:focus {
+    box-shadow: none !important;
+}
+
+.header .notificationDiv-w .dropdown-toggle::after {
+    margin-right: 10px !important;
+}
+
+.bottomHeader-w {
+    width: 100%;
+    height: 160px;
+    display: inline-block;
+    padding: 20px;
+    background: url('../../../assets/image/bottomBackground.jpg');
+    background-size: cover;
+    margin-top: -6px;
+    font-family: 'Cairo', sans-serif;
+    direction: rtl; 
+}
+
+.bottomHeader-w .rightLogo-w,
+.bottomHeader-w .leftLogo-w,
+.bottomHeader-w .center {
+    width: 100%;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+
+
+.bottomHeader-w {
+    position: relative;
+}
+
+.bottomHeader-w  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(245, 245, 245, 0.3);
+}
+
+.bottomHeader-w .rightLogo-w img {
+    margin-top: 15px;
+}
+
+.bottomHeader-w .leftLogo-w img {
+    margin-top: 15px;
+}
+
+.bottomHeader-w .center h2 {
+    font-size: 30px;
+    color: #bda380;
+    margin-top: 20px;
+}
+
+.bottomHeader-w .center p {
+    font-size: 15px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: normal;
+    color: #00a99d;
+}
+
+.bottomHeader-w .rightLogo-w img {
+    width: 210px;
+}
+
+.loginLink{
+    display: block;
+    margin-top: 12px;
+    float: right;
+}
+
+.fixDropDown-w {
+    top: 38px !important;
+    left: 0px;
+    position: fixed;
+    margin-left: 76%; 
+}
+
+.fixDropDown-w button, 
+.fixDropDown-w button a {
+    color: #252525;
+}
+
+.internalHeader-w {
+    width: 100%;
+    display: inline-block;
+}
+
+.internalHeader-w .topHeader-w {
+    width: 100%;
+    height: 60px;
+    padding: 10px 0;
+    background-color: #c3c2c2;
+}
+
+.internalHeader-w .topHeader-w .datehigri-w {
+    width: 100%;
+    color: #fff;
+}
+.internalHeader-w .topHeader-w .searchInput-w {
+    width: 100%;
+    color: #fff;
+}
+
+.internalHeader-w .topHeader-w .notification {
+    width: 100%;
+    color: #fff;
+}
+
+/* start media query */
+@media(max-width: 767px){
+    .hidden-xs{
+        display: none;
+    }
+}
+/* end media query */ 
+
+.active-link {
+    background-color: purple;
+    color: #fff !important;
+  }
+
+  .dateDiv-w{
+      width: 100%;
+      text-align: left;
+  }
+
+  .buttonW {
+    background-color: transparent !important;
+    border: none !important;
+    cursor: pointer !important;
+    color: #fff !important;
+    outline: none !important;
+    text-shadow: 0px 0px 2px #000 !important;
+    font-weight: bold !important;
+    direction: rtl !important;
+}
+
+
+.buttonW:hover{
+    background-color: transparent;
+}

src/app/dashboard/header/header.component.html

@@ -0,0 +1,71 @@
+<div class="headerDashBoard" *ngIf="authSer.showDashboardHeader">   
+    <!-- top Header content -->
+    <div class="header" *ngIf="authSer.showHeaderDashBoard">
+      <div class="container">
+        <div class="row">
+          <div class="col-6 col-sm-6 col-md-6 col-lg-6">
+            <div class="notificationDiv-w">
+              <!-- <div class="btn-group mr-3" style="float: right; direction: ltr;">
+                  <button type="button" class="btn btn-primary defaultHover-w" style="background-color:#C0BFC0"> {{authSer.dataLoginUser['name']}} </button>
+                  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                    <button class="btn btn-primary dropdown-toggle-split" style="background-color:#C0BFC0" ngbDropdownToggle></button>
+                    <div class="dropdown-menu" style="left:-100px" ngbDropdownMenu>
+                      <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
+                      <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
+                    </div>
+                  </div>
+                </div> -->
+                <div class="col">
+                    <div ngbDropdown class="d-inline-block" style="float: right; direction: ltr;">
+                      <button class="btn btn-outline-primary buttonW" id="dropdownBasic1" ngbDropdownToggle><img class="img" src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="image">
+                        {{authSer.dataLoginUser['name']}}</button>
+                      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                          <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
+                          <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
+                          <button class="dropdown-item" style="cursor: pointer" (click)="onInternalPage()">البوابه الداخليه</button>
+                      </div>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="col-6 col-sm-6 col-md-6 col-lg-6">
+            <div class="dateDiv-w">
+                <p style="float:left;">{{'24/01/2014' | amParse:'!DD/!MM/!YYYY' | amDateFormat:'LL'}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- bottomHeader content -->
+    <div class="bottomHeader-w">
+      <div class="overlay">
+        <div class="container">
+          <div class="row">
+            <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+              <div class="rightLogo-w text-center">
+                <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
+              </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+              <div class="center text-center">
+                <h2>المنصه الداخليه</h2>
+                <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
+              </div>
+            </div>
+            <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+              <div class="leftLogo-w text-center">
+                <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>     
+    
+    <!-- services content -->
+    <div class="pagesHeader-w">
+      
+    </div>
+</div>
+

src/app/dashboard/header/header.component.ts

@@ -0,0 +1,55 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit, LOCALE_ID, Inject } from '@angular/core';
+import { Router } from '@angular/router';
+import * as moment from 'moment';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { UserService } from '../../shared/user.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+
+export class HeaderComponent implements OnInit {
+
+  imgSrc: string = '../../../assets/image'; 
+
+
+  constructor(private authSer: AuthServiceService ,
+    private userSer: UserService,
+    private router: Router) { }
+
+
+  ngOnInit() {
+
+    this.authSer.showHeaderLogin = true;
+    this.authSer.showHeaderDashBoard = false;
+
+    
+    const m = moment().format('iYYYY/iM/iD');
+    console.log(m);
+   
+    this.userSer.getUserDataProfile();
+    console.log();
+   
+  }
+
+  onGetProfile() {
+    console.log('profile/'  + this.authSer.dataLoginUser['id']);
+    this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
+  }
+
+  //log out function
+  onLogout() {
+    localStorage.clear();
+    //localStorage.setItem('token' , '');
+    this.router.navigate(['login']);
+  }
+
+  onInternalPage() {
+    this.router.navigate(['/InternalPage']);
+  }
+
+
+}

src/app/dashboard/hospitals/add-hospital/add-hospital.component.css

@@ -0,0 +1,18 @@
+.rightW {
+    display: block;
+    margin: 33px 0;
+
+}
+
+.submittedW {
+    margin: 20px 0;
+    float: right;
+}
+
+.arrayGroupForm-w {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+

src/app/dashboard/hospitals/add-hospital/add-hospital.component.html

@@ -0,0 +1,89 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي /</li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> {{typeFirstLink}} / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+        <hr class="hr">
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 30px;">
+      <div class="col-12">
+        <form (ngSubmit)="onSubmitted()" [formGroup]="addHospitalForm">
+          
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                    <label style="float: right; margin: 5px 0">الاسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" formControlName="name"/>
+                </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                  <label style="float: right; margin: 5px 0">الاسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" placeholder="الأسم باللغه الإنجليزيه" formControlName="name_en"/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                  <button class="btn btn-secondary rightW" type="button" style="margin-top:33px" (click)="onAddTitle()">أضف المزيد من العناوين </button>
+              </div>
+            </div>
+          </div>
+        
+          <div formArrayName="fields" *ngFor="let titleControl of addHospitalForm.get('fields').controls; let i = index" style="padding: 20px 0;">
+            <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
+             
+              <div class="row">
+                  <div class="col-12 col-md-6">
+                      <div class="form-group">
+                          <label for="title" style="float: right;">العنوان باللغه العربيه</label>
+                          <input type="text" id="title" class="form-control" formControlName="title" style="margin: 10px 0;" />
+                      </div>
+                  </div>
+                  
+    
+                  <div class="col-12 col-md-6">
+                      <div class="form-group">
+                          <label for="title_en" style="float: right;">العنوان باللغه الإنجليزيه</label>
+                          <input type="text" id="title_en" class="form-control" formControlName="title_en" style="margin: 10px 0;" />
+                      </div>
+                  </div>
+                
+          
+          
+                <div class="col-12">
+                    <div class="form-group">
+                      <label id="description" style="float: right; margin: 10px 5px"> الوصف باللغه العربيه</label>
+                      <quill-editor id="description" formControlName="description" style="margin: 10px 0;">
+                      </quill-editor>
+                    </div>
+                </div>
+                  
+    
+                  <div class="col-12">
+                    <div class="form-group">
+                      <label id="description_en" style="float: right; margin: 10px 5px">الوصف باللغه الإنجليزيه</label>
+                      <quill-editor id="description_en" formControlName="description_en">
+                      </quill-editor>
+                    </div>
+                  </div>
+
+              </div>
+    
+              <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)">حذف</button>
+            </div>
+          </div>
+
+            <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid">حفظ</button>
+
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/hospitals/add-hospital/add-hospital.component.ts

@@ -0,0 +1,241 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { Location } from '@angular/common';
+import { HospitalService } from './../../../shared/hospital.service';
+import { FormGroup,FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import * as Quill from 'quill';
+
+
+@Component({
+  selector: 'app-add-hospital',
+  templateUrl: './add-hospital.component.html',
+  styleUrls: ['./add-hospital.component.css']
+})
+export class AddHospitalComponent implements OnInit, OnDestroy {
+
+  constructor(private formBuilder: FormBuilder, 
+    private hospitalService: HospitalService, 
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private toastr: ToastrService, 
+    private authSer: AuthServiceService,
+    private location: Location) { }
+
+  addHospitalForm: FormGroup;
+  fields: FormArray;
+  typeMode: boolean = false;
+  typePageEdit: string = '';
+  typeCreatePage: string = '';
+  typeLink = 'إنشاء جديد';
+  typeFirstLink: string;
+  typeId: number;
+  editSubscription: Subscription;
+  typeCreateSubscription: Subscription;
+  fieldsData = [];
+  
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    //init form data 
+    this.addHospitalForm = new FormGroup({
+      name: new FormControl(null , Validators.required),
+      name_en: new FormControl(null , Validators.required),
+      fields: this.formBuilder.array([ this.createItem() ])
+    });
+
+    this.typeCreateSubscription = this.route.params.subscribe(
+      (params: Params) => {
+        this.typeCreatePage = params['typeAdd'];
+        if(this.typeCreatePage == 'Hospital') {
+          this.typeFirstLink = 'المستشفيات والمراكز';
+        } else if(this.typeCreatePage == 'Management') {
+          this.typeFirstLink = 'الإدارات';
+        }
+      }
+    );
+
+    //edit mode 
+    this.editSubscription =  this.route.params.subscribe(
+        (params: Params) => {
+          if(params['typeHospitalMode'] == 'edithos') {
+            this.typeLink = 'تعديل';
+            this.typeFirstLink = 'المستشفيات والمراكز';
+            this.addHospitalForm = new FormGroup({
+              name: new FormControl(null , Validators.required),
+              name_en: new FormControl(null , Validators.required),
+              fields: this.formBuilder.array([])
+            });
+            this.spinner.show();
+            this.typeMode = true;
+            this.typePageEdit = 'edithos';
+            this.typeId = params['editTypePageId'];
+            this.hospitalService.getHospitalData(this.typeId, 'edithos').subscribe(
+              (responce) => {
+                console.log('responcce', responce);
+                this.fieldsData = responce['hospital_center'].fields;
+                console.log(this.fieldsData);
+                this.addHospitalForm.patchValue({
+                  name: responce['hospital_center'].name,
+                  name_en: responce['hospital_center'].name_en,
+                });
+                  this.fields = this.addHospitalForm.get('fields') as FormArray;
+                  for(let i = 0; i < this.fieldsData.length; i++) {
+                    this.fields.push(
+                      this.formBuilder.group({
+                        title: this.fieldsData[i].title,
+                        title_en: this.fieldsData[i].title_en,
+                        description: this.fieldsData[i].description,
+                        description_en: this.fieldsData[i].description_en, 
+                      })
+                    )
+                  }
+                  this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+          } else if (params['typeHospitalMode'] == 'editman') {
+            this.typeLink = 'تعديل';
+            this.typeFirstLink = 'الإدارات';
+            this.addHospitalForm = new FormGroup({
+              name: new FormControl(null , Validators.required),
+              name_en: new FormControl(null , Validators.required),
+              fields: this.formBuilder.array([])
+            });
+            this.spinner.show();
+            this.typeMode = true;
+            this.typePageEdit = "editman";
+            this.typeId = params['editTypePageId'];
+            this.hospitalService.getHospitalData(this.typeId, 'editman').subscribe(
+              (responce) => {
+                console.log('responcce', responce);
+                this.fieldsData = responce['management'].fields;
+                this.addHospitalForm.patchValue({
+                  name: responce['management'].name,
+                  name_en: responce['management'].name_en,
+                });
+                  this.fields = this.addHospitalForm.get('fields') as FormArray;
+                  for(let i = 0; i < this.fieldsData.length; i++) {
+                    this.fields.push(
+                      this.formBuilder.group({
+                        title: this.fieldsData[i].title,
+                        title_en: this.fieldsData[i].title_en,
+                        description: this.fieldsData[i].description,
+                        description_en: this.fieldsData[i].description_en,
+                      })
+                    )
+                  }
+                  this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+          }
+        }
+      );
+  };
+
+  //to make at least on element in form array
+  createItem(): FormGroup {
+    return this.formBuilder.group({
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+    });
+  };
+ 
+  //add more title
+  onAddTitle() {
+    this.fields = this.addHospitalForm.get('fields') as FormArray;
+    this.fields.push(this.createItem());
+  }
+
+  //remove from array form
+  removeTitle(index: number) {
+    this.fields = this.addHospitalForm.get('fields') as FormArray;
+    this.fields.removeAt(index);
+  }
+
+  //submitted form
+  onSubmitted() {
+
+    console.log(this.addHospitalForm.value);
+    const formHospitalData = this.addHospitalForm.value;
+
+  if(this.typeCreatePage == 'Hospital') {
+    if(formHospitalData['fields'][0].title == '' || formHospitalData['fields'][0].description == '') {
+        this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
+      } else {
+        this.hospitalService.addHospital(formHospitalData, 'hospital').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }
+    } else if(this.typeCreatePage == 'Management') {
+      if(formHospitalData['fields'][0].title == '' || formHospitalData['fields'][0].description == '') {
+          this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
+        } else {
+          this.hospitalService.addHospital(formHospitalData, 'management').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الاضافه بنجاح');
+              this.location.back();
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+        }
+    }
+
+    if(this.typeMode) {
+
+      if(this.typePageEdit == 'edithos'){
+        this.hospitalService.editHospital(this.typeId, formHospitalData, 'hospital').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح ');
+          }, (error) => {
+            console.log(error);
+            this.toastr.error('فشل التعديل !');
+          }
+        );
+      } else if(this.typePageEdit == 'editman'){
+          this.hospitalService.editHospital(this.typeId, formHospitalData, 'management').subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح ');
+              }, (error) => {
+                console.log(error);
+                this.toastr.error('فشل التعديل !');
+              }
+            )
+      }
+    }
+
+  };
+
+  ngOnDestroy() {
+    this.editSubscription.unsubscribe();
+  }
+
+}

src/app/dashboard/hospitals/hospital-list/hospital-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/hospitals/hospital-list/hospital-list.component.html

@@ -0,0 +1,72 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">{{typeLink}}</li>
+        </ul>
+      <hr class="hr">
+    </div>
+  </div>
+    
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+  </div>
+  
+  <table class="table table-bordered">
+    <thead class="headBackground-w">
+      <tr>
+        <th>
+          <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+          </div>
+        </th>
+        <th>الاسم</th>
+        <th *ngIf="authSer.showEditBtn">تعديل</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+        <td>
+          <div class="custom-control custom-checkbox centerIneerItem">
+            <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+            <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          </div>
+        </td>
+        <td>{{data.name}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+</div>

src/app/dashboard/hospitals/hospital-list/hospital-list.component.ts

@@ -0,0 +1,281 @@
+import { UserService } from './../../../shared/user.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { HospitalService } from './../../../shared/hospital.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-hospital-list',
+  templateUrl: './hospital-list.component.html',
+  styleUrls: ['./hospital-list.component.css']
+})
+export class HospitalListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router,
+    private authSer: AuthServiceService, 
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private toastr: ToastrService,
+    private hospitalService: HospitalService) { }
+
+  dataList = [];
+  dataListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  pageId: number;
+  userLoginId:number;
+  serviceId:number;
+  typeLink: string = '';
+  dataTableNumber: number = 5;
+  pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //init the values of permision boolean
+   this.authSer.showAddBtn = false;
+   this.authSer.showDeleteBtn = false;
+   this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        //console.log('iddddddddd', params['hospitalListId']);
+        this.pageId = params['typePageId'];
+        if(this.pageId == 6) {
+          this.typeLink = 'المستشفيات والمراكز';
+        } else if(this.pageId == 10) {
+          this.typeLink = 'الإدرات';
+        }
+      }
+    );
+
+    //get parent params and get list hospitals
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        if(this.pageId == 6) {
+          this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.dataList = responce['hospital_centers'];
+              this.count = responce['count'];
+              this.perPagePagenation = responce['per_page'];
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              this.pages = responce['pages'];
+              console.log('paaaages', this.pages);
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 6) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_hospitals_centers'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_hospitals_centers'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_hospitals_centers'){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no roles');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        } else if(this.pageId == 10) {
+          this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.dataList = responce['managements'];
+              this.count = responce['count'];
+              this.perPagePagenation = responce['per_page'];
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              this.pages = responce['pages'];
+              console.log('paaaages', this.pages);
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 10) {
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_management'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_management'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_managements'){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
+                }else {
+                  console.log('no roles');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      }
+    );
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+        return item.selected == true;
+      })
+  };
+
+    //deleted function
+    onDelete() {
+      this.dataListIds = [];
+      for(let i = 0; i < this.dataList.length; i++) {
+        if(this.dataList[i].selected == true) {
+          this.dataListIds.push(this.dataList[i].id);
+        }
+      }
+
+      console.log(this.dataListIds);
+
+    this.hospitalService.deleteDatas(this.dataListIds, this.pageId).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //filtter function
+  filtterFunc(data) {
+    this.dataList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    if(this.pageId == 6){
+      this.hospitalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['hospital_centers'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    } else if(this.pageId == 7) {
+      this.hospitalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['managements'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    }
+  };
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+    if(this.pageId == 6) {
+      this.hospitalService.getHospitalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['hospital_centers'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    } else if(this.pageId == 10) {
+      this.hospitalService.getHospitalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['managements'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+  };
+
+  //add hospitals 
+  onAdd() {
+    if(this.pageId == 6) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Hospital']);
+    } else if(this.pageId == 10) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Management']);
+    }
+  }
+
+  //on edit hospital 
+  onEdit(hospitalIndex:number) {
+    if(this.pageId == 6){
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Hospital/' + 'edithos/' + hospitalIndex]);
+    } else if(this.pageId == 10){
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Management/' + 'editman/' + hospitalIndex]);
+    }
+  }
+
+}

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.css

@@ -0,0 +1,92 @@
+.descriptionContainer {
+    width: 100%;
+    display: inline-block;
+}
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 100%;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+input{
+    font-size: 13px !important;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+
+.rightW {
+    display: block;
+    margin: 20px 0;
+}
+
+.submittedW {
+    margin: 20px 0;
+    float: right;
+}
+
+.arrayGroupForm-w {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+
+

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.html

@@ -0,0 +1,93 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الداخليه / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+        </ul>
+        <hr class="hr">
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 30px;">
+      <div class="col-12">
+        <form (ngSubmit)="onSubmitted()" [formGroup]="addInternalForm">
+
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label style="float: right; margin: 5px 0">الاسم باللغه العربيه  <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" formControlName="name"/>
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4">
+                  <div class="form-group">
+                      <label style="float: right; margin: 5px 0">الاسم باللغه الأنجليزيه  <span class="spanReqired-w">*</span></label>
+                      <input type="text" class="form-control" placeholder="الأسم باللغه الانجليزيه" formControlName="name_en"/>
+                  </div>
+              </div>
+            
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="satus_ex" style="float:right">الحاله  <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" formControlName="status">
+                    <option value="0">غير فعال</option>
+                    <option value="1">فعال</option>
+                  </select>
+                </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                    <button class="btn btn-secondary form-control" style="margin-top:30px" type="button" (click)="onAddTitle(i)">أضف المزيد من الوصف</button>
+                </div>
+              </div>
+          </div>
+
+          <hr>
+        <div class="descriptionContainer">
+          <div class="row">
+            <div class="col-12 col-md-6"  formArrayName="fields" *ngFor="let titleControl of addInternalForm.get('fields').controls; let i = index">
+              <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
+                <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                  <div class="form-group text-center imgContainer">
+                      <img [src]="urlImg[i]" class="imgProfile" height="200">
+                      <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" (change)="getUrl($event,i)" formControlName="photo"/>
+                      <label for="file{{i}}" class="iconUpload-w"  *ngIf="showOpenFile[i]"><i class="fas fa-upload"></i></label>
+                      <label class="iconUpload-w" *ngIf="showCloseFile[i]" (click)="closePhoto(i)"><i class="fas fa-times"></i></label>
+                  </div>
+                </div>
+                <label for="name" style="float: right;">الأسم باللغه العربيه</label>
+                <input type="text" id="name" class="form-control" formControlName="name" style="margin: 10px 0;" />
+                <label for="name_en" style="float: right;">الأسم باللغه الإنجليزيه</label>
+                <input type="text" id="name_en" class="form-control" formControlName="name_en" style="margin: 10px 0;" />
+                <label for="link" style="float: right;">الرابط</label>
+                <input type="text" id="link" class="form-control" formControlName="link" style="margin:10px 0" />
+                
+                <label for="apperance" style="float: right;">الظهور</label>
+                <select id="apperance" class="form-control" formControlName="apperance" style="margin: 10px 0">
+                    <option value="1">الظهور</option>
+                    <option value="0">غير الظهور</option>
+                </select>
+                <label for="status" style="float: right;">الحاله</label>
+                <select id="status" class="form-control" formControlName="status" style="margin: 10px 0">
+                    <option value="1">فعال</option>
+                    <option value="0">غير فعال</option>
+                </select>
+                <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)">حذف</button>
+              </div>
+            </div>
+          </div>  
+        </div>
+
+        <button type="submit" class="btn btn-success rightW" [disabled]="!addInternalForm.valid">حفظ</button>
+        
+      </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.ts

@@ -0,0 +1,265 @@
+import { InternalSerService } from './../../../shared/internal-ser.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription, empty } from 'rxjs';
+import { Location } from '@angular/common';
+import { HospitalService } from './../../../shared/hospital.service';
+import { FormGroup,FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-add-internal-services',
+  templateUrl: './add-internal-services.component.html',
+  styleUrls: ['./add-internal-services.component.css']
+})
+
+export class AddInternalServicesComponent implements OnInit {
+
+  constructor(private formBuilder: FormBuilder, 
+    private internalServices: InternalSerService, 
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private toastr: ToastrService, 
+    private authSer: AuthServiceService,
+    private location: Location) { }
+
+  addInternalForm: FormGroup;
+  fields: FormArray;
+  typeMode: boolean = false;
+  typePageEdit: string = '';
+  typeCreatePage: string = '';
+  typeLink = 'إنشاء جديد';
+  pageId: number;
+  editSubscription: Subscription;
+  typeCreateSubscription: Subscription;
+  fieldsData = [];
+  imageBase64 = [];
+  photoType: string = '';
+  checkChangeImage = [false];
+  showOpenFile = [true];
+  showCloseFile = [false];
+  urlImg =  ['../../assets/image/avatar.png'];
+  i = 0;
+  
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+     //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    //init form data 
+    this.addInternalForm = new FormGroup({
+      name: new FormControl(null , Validators.required),
+      name_en: new FormControl(null , Validators.required),
+      status: new FormControl(null, Validators.required),
+      fields: this.formBuilder.array([ this.createItem() ])
+    });
+
+
+    //edit mode 
+    this.editSubscription =  this.route.params.subscribe(
+        (params: Params) => {
+          if(params['typeInternalMode'] == 'edit') {
+            
+            this.typeLink = 'تعديل';
+            this.imageBase64 = [];
+            //redifine form data
+            this.addInternalForm = new FormGroup({
+              name: new FormControl(null , Validators.required),
+              name_en: new FormControl(null , Validators.required),
+              status: new FormControl(null, Validators.required),
+              fields: this.formBuilder.array([])
+            });
+
+            this.spinner.show();
+            this.typeMode = true;
+            this.pageId = params['editInternalId'];
+
+            this.internalServices.getInternalData(this.pageId).subscribe(
+              (responce) => {
+                console.log('responcce', responce);
+                this.fieldsData = responce['internal_service'].fields;
+                console.log(this.fieldsData);
+                this.addInternalForm.patchValue({
+                  name: responce['internal_service'].name,
+                  name_en: responce['internal_service'].name_en,
+                  status: responce['internal_service'].status,
+                });
+                  
+                this.fields = this.addInternalForm.get('fields') as FormArray;
+                  
+                for(let i = 0; i < this.fieldsData.length; i++) {
+                    this.fields.push(
+                      this.formBuilder.group({
+                        name: this.fieldsData[i].name,
+                        name_en: this.fieldsData[i].name_en,
+                        link: this.fieldsData[i].link,
+                        apperance: this.fieldsData[i].apperance,
+                        status: this.fieldsData[i].status,
+                      })
+                    )
+                  }
+
+                  for(let i=0; i<this.fieldsData.length; i++) {
+                    this.urlImg[i] = this.fieldsData[i].photo ? this.authSer.pathImg + this.fieldsData[i].photo : '../../assets/image/avatar.png';
+                    this.showCloseFile[i] = true;
+                    this.showOpenFile[i] = false;
+                    this.checkChangeImage[i] = false;
+                  }
+
+                  this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+              }
+            );
+          } else{
+            this.typeLink = 'إنشاء جديد';
+          }
+        }
+      );
+  };
+
+  //to make at least on element in form array
+  createItem(): FormGroup {
+    return this.formBuilder.group({
+      name: '',
+      name_en: '',
+      photo: '',
+      link: '',
+      apperance: '',
+      status: '',
+    });
+  };
+ 
+  //add more title
+  onAddTitle(i) {
+    this.fields = this.addInternalForm.get('fields') as FormArray;
+    this.fields.push(this.createItem());
+    this.imageBase64[this.i] = [{
+      photo : "",
+      photo_type: "",
+    }];
+    this.i++;
+    console.log(this.imageBase64);
+    this.urlImg.push('../../assets/image/avatar.png');
+    this.showOpenFile.push(true);
+    this.showCloseFile.push(false);
+    this.checkChangeImage.push(false);
+  }
+
+  //remove from array form
+  removeTitle(index: number) {
+    this.fields = this.addInternalForm.get('fields') as FormArray;
+    this.fields.removeAt(index);
+  }
+
+
+
+  onFileChanges(event,i) {
+
+    console.log(event);
+    this.photoType = event[0].type.split('/');
+    console.log(i);
+
+    this.imageBase64[i]={
+      photo : event[0].base64,
+      photo_type: this.photoType[1],
+    };
+
+    console.log(this.imageBase64);
+
+    this.checkChangeImage[i] = true;
+    this.showCloseFile[i] = true;
+    this.showOpenFile[i] = false;
+
+  }
+
+  //to upload url to view
+  getUrl(event,i) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg[i] = event.target['result'];
+      console.log(this.urlImg[i]);
+    }
+  }
+ }
+
+ //to close and upload photo
+ closePhoto(i) {
+    this.showCloseFile[i] = false;
+    this.showOpenFile[i] = true;
+    this.urlImg[i] =  '../../assets/image/avatar.png';
+    this.imageBase64[i] = {
+      photo: "",
+      photo_type: "",
+    }
+    console.log(this.imageBase64);
+ }
+
+
+   //submitted form
+   onSubmitted() {
+
+    const formInternalData = this.addInternalForm.value;
+    
+    for(let i = 0; i< formInternalData['fields'].length; i++) {
+      for(let j = 0; j < this.imageBase64.length; j++) {
+        formInternalData['fields'][i].photo = this.imageBase64[i].photo;
+        formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
+      }
+    }
+
+    console.log(formInternalData);
+
+    if(formInternalData['fields'].length == 0) {
+      this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
+    } else if(formInternalData['fields'][0].name == '' || formInternalData['fields'][0].apperance == '' || formInternalData['fields'][0].status == '') {
+      this.toastr.warning('أدخل عنوان ووصف واحد علي الاقل !');
+    } else {
+        this.internalServices.addInternal(formInternalData).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+    }
+
+
+    if(this.typeMode) {
+      this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+        }, (error) => {
+          console.log(error);
+          this.toastr.error('فشل التعديل !');
+        }
+      );
+    }
+
+  };
+
+  ngOnDestroy() {
+    this.editSubscription.unsubscribe();
+  }
+
+
+}

src/app/dashboard/internal-services/internal-services.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/internal-services/internal-services.component.html

@@ -0,0 +1,74 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-unstyled titileLi-w">
+        <li class="headingText-w">خدمه إداره المحتوي / </li>
+        <li class="headingText-w activeLi-w" style="margin-right:5px">{{typeLink}}</li>
+      </ul>
+      <hr class="hr">
+    </div>
+  </div>
+    
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+  </div>
+  
+  <table class="table table-bordered">
+    <thead class="headBackground-w">
+      <tr>
+        <th>
+          <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+          </div>
+        </th>
+        <th>الاسم</th>
+        <th>الحاله</th>
+        <th *ngIf="authSer.showEditBtn">تعديل</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+        <td>
+          <div class="custom-control custom-checkbox centerIneerItem">
+            <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+            <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          </div>
+        </td>
+        <td>{{data.name}}</td>
+        <td>{{data.status == '1' ? 'منشور' : data.status == '0' ? 'غير منشور' : 'not found'}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+</div>

src/app/dashboard/internal-services/internal-services.component.ts

@@ -0,0 +1,203 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { UserService } from '../../shared/user.service';
+import { InternalSerService } from '../../shared/internal-ser.service';
+
+
+@Component({
+  selector: 'app-internal-services',
+  templateUrl: './internal-services.component.html',
+  styleUrls: ['./internal-services.component.css']
+})
+export class InternalServicesComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router,
+    private authSer: AuthServiceService, 
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private toastr: ToastrService,
+    private internalService: InternalSerService) { }
+
+  dataList = [];
+  dataListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  pageId: number;
+  userLoginId:number;
+  serviceId:number;
+  typeLink: string = '';
+  dataTableNumber: number = 5;
+  pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+  //init the values of permision boolean
+  this.authSer.showAddBtn = false;
+  this.authSer.showDeleteBtn = false;
+  this.authSer.showEditBtn = false;
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.showDashboardHeader = true;
+  this.authSer.internalHeader = false;
+  
+    this.route.params.subscribe(
+      (params: Params) => {
+        //console.log('iddddddddd', params['hospitalListId']);
+        this.pageId = params['internalPageId'];
+          this.typeLink = 'الخدمات الداخليه';
+      }
+    );
+
+    //get parent params and get list hospitals
+    this.route.parent.params.subscribe(
+      (params: Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+
+        this.internalService.getInternalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.dataList = responce['internal_services'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+        
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            this.pages = responce['pages'];
+            console.log('paaaages', this.pages);
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 14) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_internal_service'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_internal_service'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_internal_services'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no interanls');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+        return item.selected == true;
+      })
+  };
+
+    //deleted function
+    onDelete() {
+      this.dataListIds = [];
+      for(let i = 0; i < this.dataList.length; i++) {
+        if(this.dataList[i].selected == true) {
+          this.dataListIds.push(this.dataList[i].id);
+        }
+      }
+
+      console.log(this.dataListIds);
+
+    this.internalService.deleteDatas(this.dataListIds, this.pageId).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //filtter function
+  filtterFunc(data) {
+    this.dataList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+      this.internalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['internal_services'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+  };
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.dataList = [];
+    this.dataTableNumber = event.target.value;
+      this.internalService.getInternalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.dataList = responce['internal_services'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+  };
+
+  //add hospitals 
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addInternalServices');
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addInternalServices']);
+  }
+
+  //on edit hospital 
+  onEdit(internalIndex:number) {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/' + 'InternalServices/edit/' + internalIndex);
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'InternalServices/edit/' + internalIndex]);
+  }
+
+}

src/app/dashboard/lectures/add-lecture/add-lecture.component.css

@@ -0,0 +1,22 @@
+.rightW {
+    display: block;
+    float: right;
+    margin: 20px 0;
+}
+
+.rightW {
+    display: block;
+    margin: 20px 0;
+}
+
+.submittedW {
+    margin: 20px 0;
+    float: right;
+}
+
+.arrayGroupForm-w {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 20px;
+}
+

src/app/dashboard/lectures/add-lecture/add-lecture.component.html

@@ -0,0 +1,88 @@
+<div class="addHospital-w">
+    <div class="container">
+      
+      <div class="row" style="margin-bottom: 30px;">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه إداره المحتوي / </li>
+              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">شريط الأحداث والتفاعلات الداخليه / </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+            </ul>
+            <hr class="hr">
+          </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name" name="name" ngModel [ngModel]="lecture.name" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name_en" name="name_en" ngModel [ngModel]="lecture.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="ranking" [ngModel]="lecture.ranking" id="ranking" required>
+                    <option value="10000">المزيد</option>  
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                  </select>
+                    <!-- <span *ngIf="!name.valid && name.touched"></span>  -->
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label for="display_location" style="float: right; margin-right: 5px"> الصفحه <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="display_location" [ngModel]="lecture.display_location" id="display_location" required>  
+                    <option value="internal">داخليه</option>
+                    <option value="external">خارجيه</option>
+                    <option value="both">كلاهما</option>
+                  </select>
+                </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4">
+                  <div class="form-group">
+                      <label for="lecture_time" style="float: right;margin-right: 5px"> وقت البدء <span class="spanReqired-w">*</span></label>
+                      <input type="datetime-local" class="form-control" name="lecture_time" [ngModel]="lecture.lecture_time" id="lecture_time" required />
+                   </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                  <div class="form-group">
+                      <label for="lecture_end" style="float: right;margin-right: 5px"> وقت الإنتهاء <span class="spanReqired-w">*</span></label>
+                      <input type="datetime-local" class="form-control" name="end_time" [ngModel]="lecture.end_time" id="lecture_end" required />
+                  </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="lecture.status" id="status" required>  
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+            </div>
+            
+            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+  
+          </form>
+  
+        </div>
+      </div>
+    </div>
+  </div>
+  

src/app/dashboard/lectures/add-lecture/add-lecture.component.ts

@@ -0,0 +1,118 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { FormGroup, NgForm } from '@angular/forms';
+import { LectureService } from '../../../shared/lecture.service';
+
+
+@Component({
+  selector: 'app-add-lecture',
+  templateUrl: './add-lecture.component.html',
+  styleUrls: ['./add-lecture.component.css']
+})
+export class AddLectureComponent implements OnInit {
+
+  @ViewChild('f') lectureForm: NgForm;
+  typeMode: boolean = false;
+  typeLink: string = '';
+  lectureId: number;
+
+  lecture = {
+    name: '',
+    name_en: '',
+    ranking: '',
+    display_location: '',
+    end_time: '',
+    lecture_time: '',
+    status: '',
+  }
+  
+
+  constructor(private lectureServices: LectureService,
+    private userService: UserService,
+    private location: Location,
+    private toastr: ToastrService,
+    private authSer: AuthServiceService,
+    private route: ActivatedRoute, 
+    private spineer: NgxSpinnerService) { }
+
+  ngOnInit() {
+
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeLectureMode'] == 'edit') {
+          this.typeLink = 'تعديل';
+          this.spineer.show();
+          this.typeMode = true;
+          this.lectureId = params['editLectureId'];
+          this.lectureServices.getLectureData(this.lectureId).subscribe(
+            (responce) => {
+              console.log(responce);
+              const lectureData = responce['lecture'];
+              console.log(lectureData);
+              this.lecture.name = lectureData.name;
+              this.lecture.name_en = lectureData.name_en;
+              this.lecture.ranking = lectureData.ranking;
+              this.lecture.display_location = lectureData.display_location;
+              this.lecture.lecture_time = lectureData.lecture_time;
+              this.lecture.end_time = lectureData.end_time;
+              this.lecture.status = lectureData.status;
+              this.spineer.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    );
+  }
+
+  //submitted form
+  onSubmitted() {
+    console.log(this.lectureForm.value);
+    this.lectureForm.value['lecture_time'] = this.lectureForm.value['lecture_time'].split('T').join(" ");
+    this.lectureForm.value['end_time'] = this.lectureForm.value['end_time'].split('T').join(" ");
+    console.log(this.lectureForm.value['lecture_time']);
+    if(this.typeMode) {
+      this.lectureServices.editLecture(this.lectureForm.value , this.lectureId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.toastr.error('حدث خطأ !');
+          console.log(error);
+        }
+      );
+    } else {
+      this.lectureServices.addLecture(this.lectureForm.value).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          this.toastr.error('حدث خطأ !');
+          console.log(error);
+        }
+      );
+    }
+  }
+
+}

src/app/dashboard/lectures/lectures-list/lectures-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/lectures/lectures-list/lectures-list.component.html

@@ -0,0 +1,92 @@
+<div class="container">
+  
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> شريط الأحداث والتفاعلات الداخليه</li>
+        </ul>
+        <hr class="hr">
+      </div>
+    </div>
+  
+  
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+          <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+  
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="form-group">
+          <span class="spanSelect-w">أظهر
+            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+            </select>
+            من العناصر
+          </span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6">
+      
+      </div>
+    </div>
+    
+    <table class="table table-bordered">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            </div>
+          </th>
+          <th>عنوان الحدث</th>
+          <th>الحاله</th>
+          <th>الترتيب</th>
+          <th>تاريخ الإنشاء</th>
+          <th> موقع العرض</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let lecture of lecturesList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{lecture.id}}" [(ngModel)]="lecture.selected" [value]='lecture' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{lecture.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            </div>
+          </td>
+          <td>{{lecture.name}}</td>
+          <td>{{lecture.status == '0' ? 'مسوده' : lecture.status == '1' ? 'نشر' : 'not found'}}</td>
+          <td>
+            {{lecture.ranking}}
+            <!-- <select class="form-control" [ngModel]="lecture.ranking" (change)="changeRanking($event, lecture.id)">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+            </select> -->
+          </td>
+          <td>{{lecture.created_by_name}}</td>
+          <td>{{lecture.display_location == 'both' ? 'كلاهما' : lecture.display_location == 'internal' ? 'الصفحه الداخليه' : lecture.display_location == 'external' ? 'الصفحه الخارجيه' : 'غير موجود'}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(lecture.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+  

src/app/dashboard/lectures/lectures-list/lectures-list.component.ts

@@ -0,0 +1,232 @@
+import { LectureService } from './../../../shared/lecture.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { UserService } from './../../../shared/user.service';
+import { HttpClient } from '@angular/common/http';
+
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-lectures-list',
+  templateUrl: './lectures-list.component.html',
+  styleUrls: ['./lectures-list.component.css']
+})
+export class LecturesListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private http: HttpClient,
+    private lectureService: LectureService,
+    private router: Router) { }
+
+    pageId: number;
+    lecturesList = [];
+    lecturesListIds = [];
+    count: number;
+    perPagePagenation: number;
+    p: number[] = [];
+    currentPage:number = 1;
+    filtterStatus = '';
+    selectedAll: any;
+    userLoginId:number;
+    serviceId:number;
+    dataTableNumber: number = 5;
+    pages = [];
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['lecturePageId'];
+      }
+    );
+
+    //to show / hide permissions
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 15) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_lecture'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_lecture'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_lectures'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no lectures');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.lectureService.getLecturesList(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.lecturesList = responce['lectures'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.lecturesList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.lecturesList.length; i++) {
+      this.lecturesList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.lecturesList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.lecturesList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    this.lectureService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.lecturesList = responce['lectures'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+  changeRanking(event, id) {
+    const data = {
+      id: id,
+      ranking: event.target.value,
+    };
+    console.log(data);
+    this.http.post(this.authSer.pathApi + '/rank_lecture', data).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.lectureService.getLecturesList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.lecturesList = responce['lectures'];
+            console.log(this.lecturesList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      },
+      (error) => {console.log(error)},
+    );
+  };
+
+//determine the list count from select element 
+onGetValue(event) {
+  this.spinner.show();
+  this.lecturesList = [];
+  this.dataTableNumber = event.target.value;
+  this.lectureService.getLecturesList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.lecturesList = responce['lectures'];
+      this.count = responce['count'];
+      this.perPagePagenation = responce['per_page'];
+      this.spinner.hide();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    }
+  );
+}
+
+  onDelete() {
+    this.lecturesListIds = [];
+    for(let i = 0; i < this.lecturesList.length; i++) {
+      if(this.lecturesList[i].selected == true) {
+        this.lecturesListIds.push(this.lecturesList[i].id);
+      }
+    }
+
+    console.log(this.lecturesListIds);
+
+  this.lectureService.deleteLecture(this.lecturesListIds).subscribe(
+    (responce) => {
+      console.log(responce);
+      this.toastr.success('تم الحذف');
+      window.location.reload();
+    },
+    (error) => {
+      console.log(error);
+      this.spinner.hide();
+    },
+  );
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addLecture');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addLecture']);
+  }
+
+  //edit function
+   onEdit(editEventID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'Lecture/edit/' + editEventID]);
+  }
+
+}

src/app/dashboard/main-footer/footer.component.css

@@ -0,0 +1,86 @@
+.footer {
+    width: 100%;
+    height: 200px;
+    position: absolute;
+    bottom: 0;
+    background: url('../../../assets/image/footer.png') no-repeat center center;
+    background-size: cover;
+    margin-top: -13px;
+    position: relative;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+    overflow: hidden;
+}
+
+.overlayFooter-w {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(223, 212, 198, 0.6);
+}
+
+.leftFooter-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.leftFooter-w img {
+    width: 100px;
+    margin: 40px 10px;
+}
+
+.centerFooter-w {
+    width: 100%;
+    display: inline-block;
+}
+
+.centerFooter-w ul {
+    width: 100%;
+    padding: 40px 0;
+}
+
+.centerFooter-w ul li{
+    display: inline-block;
+    margin: 50px 5px;
+}
+
+.centerFooter-w ul li a {
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 600;
+    color: #fff;
+    transition: all 0.5s;
+    text-shadow: 2px 2px 4px #000000;
+}
+
+.centerFooter-w ul li a:hover {
+    color: #252525;
+    text-shadow: 0 0 0 transparent;
+}
+
+.rightFooter-w {
+    width: 100%;
+    display: inline-block;
+    padding: 35px 0;
+    margin-top: 40px;
+}
+
+.rightFooter-w img {
+    width: 200px;
+}
+
+/* start media query */
+@media(max-width: 767px) {
+    .centerFooter-w ul{
+        padding: 0;
+    }
+    .centerFooter-w ul li{
+        display: inline-block;
+        margin: 0 5px;
+    }
+}

src/app/dashboard/main-footer/footer.component.html

@@ -0,0 +1,29 @@
+<div class="footer">
+  <div class="overlayFooter-w">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-sm-6 col-md-3">
+          <div class="rightFooter-w text-center">
+            <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
+          </div>    
+        </div>
+        <div class="col-12 col-sm-6 col-md-6">
+          <div class="centerFooter-w text-center">
+            <ul class="list-unstyled">
+              <li><a href="">تواصل معنا</a></li>
+              <li><a href="">البريد الالكتروني</a></li>
+              <li><a href="">سياسه الخصوصيه</a></li>
+              <li><a href="">الاحكام والشروط</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-3 hidden-xs">
+          <div class="leftFooter-w text-center">
+            <img src="../../assets/image/footer_logo1.png" alt="logo" title="logo" />
+            <img src="../../assets/image/footer_logo2.png" alt="logo" title="logo" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/main-footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/dashboard/main-menu/add-menu/add-menu.component.css

@@ -0,0 +1,88 @@
+.imgProfile {
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
+    border-radius: 20px 20px 0 0;
+}
+.rightW {
+    display: block;
+    margin: 20px 0;
+}
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    top: 10px;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.regesterBtn-w {
+    width: 200px;
+    display: block;
+    margin:  20px auto;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}

src/app/dashboard/main-menu/add-menu/add-menu.component.html

@@ -0,0 +1,93 @@
+<div class="addHospital-w">
+    <div class="container">
+      
+      <div class="row" style="margin-bottom: 30px;">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w">خدمه إداره المحتوي / </li>
+              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> القائمه الرئيسيه/ </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+            </ul>
+            <hr class="hr">
+          </div>
+      </div>
+  
+      <div class="row">
+        <div class="col-12">
+  
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+
+            <div class="row">
+              
+              <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                    <img [src]="urlImg" class="imgProfile" height="200"> 
+                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                </div>
+                <!-- <span *ngIf="checkValidImg" style="color: red">must be in 'png' format</span> -->
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name" style="float: right; margin-right: 5px"> الأسم باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" placeholder="الأسم باللغه العربيه" id="name" name="name" ngModel [ngModel]="menu.name" #name="ngModel" required/>
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="name_en" style="float: right; margin-right: 5px">الأسم باللغه الأنجليزيه <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" id="name_en" placeholder="الأسم باللغه الأنجليزيه" name="name_en" ngModel [ngModel]="menu.name_en" #name="ngModel" required/>
+                </div>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="link" style="float: right; margin-right: 5px">الرابط <span class="spanReqired-w">*</span></label>
+                    <input type="text" class="form-control" placeholder="الرابط" id="link" name="link" ngModel [ngModel]="menu.link" #link="ngModel" required/>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="form-group">
+                  <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
+                  <select class="form-control" name="ranking" [ngModel]="menu.ranking" id="ranking" required>  
+                    <option value="1000">المزيد</option>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                  </select>
+                </div>
+              </div>
+    
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="status" [ngModel]="menu.status" id="status" required>  
+                  <option value="1">فعال</option>
+                  <option value="0">غير فعال</option>
+                </select>
+              </div>
+              
+              <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <label for="parent" style="float:right; margin-right:5px;">الأب</label>
+                <select class="form-control" name="parent_id" [ngModel]="menu.parent_id" id="parent">
+                  <option value="">لايوجد</option>
+                  <option *ngFor="let parent of parentList" [value]="parent.id">{{parent.name}}</option>
+                </select>
+              </div>
+
+            </div>
+            
+            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+  
+          </form>
+  
+        </div>
+      </div>
+    </div>
+  </div>
+  

src/app/dashboard/main-menu/add-menu/add-menu.component.ts

@@ -0,0 +1,169 @@
+import { MainMenuService } from './../../../shared/main-menu.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-menu',
+  templateUrl: './add-menu.component.html',
+  styleUrls: ['./add-menu.component.css']
+})
+export class AddMenuComponent implements OnInit {
+
+  @ViewChild('f') externalFormData: NgForm;
+
+  urlImg: string =  '../../assets/image/avatar.png';
+  imageBase64: string = '';
+  photoType: string = '';
+  checkChangeImage: boolean = false;
+  checkValidImg: boolean = true;
+  typeMode: boolean = false;
+  photoEdit: boolean = true;
+  typeLink: string = '';
+  menuId: number;
+  parentList = [];
+
+  menu = {
+    name: '',
+    name_en: '',
+    parent_id: '',
+    link: '',
+    status: '',
+    ranking: '',
+  };
+
+  constructor(private toastr: ToastrService, 
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService,
+    private authService: AuthServiceService,
+    private menuService: MainMenuService, ) { }
+
+  ngOnInit() {
+    
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeMenuMode'] == 'edit') {
+          this.spinner.show();
+          this.typeMode = true;
+          this.typeLink = 'تعديل';
+          this.menuId = params['editMenuId'];
+          this.menuService.getMenuData(this.menuId).subscribe(
+            (responce) => {
+              console.log(responce);
+              console.log(responce['menu']);
+              this.menu.name = responce['menu'].name;
+              this.menu.name_en = responce['menu'].name_en;
+              this.menu.link = responce['menu'].link;
+              this.menu.status = responce['menu'].status;
+              this.menu.ranking = responce['menu'].ranking;
+              this.menu.parent_id = responce['menu'].parent_id ? responce['menu'].parent_id : '';
+              if(responce['menu'].photo) {
+                this.checkValidImg = false;
+                this.urlImg = this.authService.pathImg + responce['menu'].photo;
+              }
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'أنشاء جديد';
+        }
+      }
+    );
+
+    this.menuService.getParentList().subscribe(
+      (responce) => {
+        console.log('parents' , responce);
+        this.parentList = responce['menus'];
+      }, 
+      (error) => {
+        console.log(error);
+      }
+    )
+  };
+
+
+
+  onFileChanges(event) {
+    console.log(event);
+    this.imageBase64 = event[0].base64;
+    this.photoType = event[0].type.split('/');
+    console.log(this.photoType[1]);
+    this.checkChangeImage = true;
+    this.checkValidImg = false;
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+ //on submitted
+ onSubmitted() {
+  const formData = this.externalFormData.value;
+  if(this.checkChangeImage){
+    formData['photo'] = this.imageBase64;
+    formData['photo_type'] = this.photoType[1];
+  } else {
+    delete formData.photo;
+    delete formData.photo_type; 
+    this.photoEdit = false;
+    console.log(formData);
+  }
+  if(this.typeMode){
+    if(this.imageBase64 == '' && this.photoEdit == true){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      this.menuService.editMenu(formData, this.menuId).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت التعديل بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في التعديل !');
+        }
+      );
+    }
+  } else {
+    if(this.imageBase64 == ''){
+      this.toastr.warning('قم باختيار صوره !');
+    } else {
+      this.menuService.addMain(formData).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تمت الاضافه بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الحفظ !');
+        }
+      );
+    }
+  }
+ }
+
+}

src/app/dashboard/main-menu/main-list/main-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/main-menu/main-list/main-list.component.html

@@ -0,0 +1,88 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">القائمه الرئيسيه</li>
+        </ul>
+      <hr class="hr">
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+  </div>
+ 
+  <table class="table table-bordered">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            </div>
+          </th>
+          <th>عنصر القائمه</th>
+          <th>الترتيب</th>
+          <th> الحاله</th>
+          <th>الأب</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let menu of menuList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{menu.id}}" [(ngModel)]="menu.selected" [value]='menu' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{menu.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            </div>
+          </td>
+          <td>{{menu.name}}</td>
+          <td> {{menu.ranking}}
+            <!-- <select class="form-control" [ngModel]="menu.ranking" (change)="changeRanking($event, menu.id)">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+            </select> -->
+          </td>
+          <td>{{menu.status == 1 ? 'نشط' : menu.status == 0 ? 'غير نشط' : 'not found' }}</td>
+          <td>{{menu.parent_name ? menu.parent_name : 'لايوجد'}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(menu.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+
+</div>

src/app/dashboard/main-menu/main-list/main-list.component.ts

@@ -0,0 +1,253 @@
+import { MainMenuService } from './../../../shared/main-menu.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { UserService } from '../../../shared/user.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-main-list',
+  templateUrl: './main-list.component.html',
+  styleUrls: ['./main-list.component.css']
+})
+export class MainListComponent implements OnInit {
+  menuId: number;
+  menuList = [];
+  menuListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private mainService: MainMenuService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+    
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.menuId = params['menuPageId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 17) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_menu'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_menu'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_menus'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.mainService.getMainList(this.menuId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.menuList = responce['menus'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.menuList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.menuList.length; i++) {
+      this.menuList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.menuList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.menuList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.menuId);
+    this.mainService.getDataUSerSearchBar(dataSearch, this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.menuList = responce['menus'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+    //change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.menuList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.mainService.getMainList(this.menuId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.menuList = responce['menus'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.menuList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+
+  changeRanking(event, id) {
+    const data = {
+      id: id,
+      ranking: event.target.value,
+    };
+    console.log(data);
+    this.http.post(this.authSer.pathApi + '/rank_menu', data).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            this.menuList = responce['menus'];
+            console.log(this.menuList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+          }
+        )
+      },
+      (error) => {console.log(error)},
+    );
+  };
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.menuList = [];
+    this.dataTableNumber = event.target.value;
+    this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.menuList = responce['menus'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+  
+  onDelete() {
+    this.menuListIds = [];
+    for(let i = 0; i < this.menuList.length; i++) {
+      if(this.menuList[i].selected == true) {
+        this.menuListIds.push(this.menuList[i].id);
+      }
+    }
+
+    console.log(this.menuListIds);
+
+    this.mainService.deleteMain(this.menuListIds).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم الحذف');
+        window.location.reload();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      },
+    );
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addMenu');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addMenu']);
+  }
+
+  //edit function
+   onEdit(editMenuID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'menu/edit/' + editMenuID]);
+  }
+  
+
+}

src/app/dashboard/news/add-news/add-news.component.css

@@ -0,0 +1,92 @@
+.rightW {
+    display: block;
+    float: right;
+    margin: 20px 0;
+}
+
+.rightW {
+    display: block;
+    margin: 20px 0;
+}
+
+.submittedW {
+    margin: 20px 0;
+    float: right;
+}
+
+.arrayGroupForm-w {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+    float: right;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    top: 10px;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+input {
+    font-size: 13px !important;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}

src/app/dashboard/news/add-news/add-news.component.html

@@ -0,0 +1,105 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <div class="row" style="margin-bottom: 30px;">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه إداره المحتوي / </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()">  الاخبار / </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+          </ul>
+          <hr class="hr">
+        </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+
+        <form (ngSubmit)="onSubmitted()" #f="ngForm">
+          <div class="row">
+            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+              <div class="form-group text-center imgContainer">
+                  <img [src]="urlImg" class="imgProfile" height="200"> 
+                  <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                  <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+              </div>
+              <span *ngIf="checkValidImg" style="color: red; position: absolute; right:0; bottom:0">must be in 'png' format</span>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="title" style="float: right; margin-right: 5px">العنوان بالغه العربيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" placeholder="العنوان باللغه العربيه" id="title" name="title" ngModel [ngModel]="new.title" #name="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="title_en" style="float: right; margin-right: 5px">العنوان باللغه الانجليزيه <span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="title_en" placeholder="العنوان باللغه الانجليزيه" name="title_en" ngModel [ngModel]="new.title_en" #name="ngModel" required/>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="ranking" [ngModel]="new.ranking" id="ranking" required>  
+                  <option value="10000">المزيد</option>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select>
+                  <!-- <span *ngIf="!name.valid && name.touched"></span>  -->
+              </div>
+            </div>
+            
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label for="display_location" style="float: right; margin-right: 5px"> الصفحه <span class="spanReqired-w">*</span></label>
+                <select class="form-control" name="display_location" [ngModel]="new.display_location" id="display_location" required>  
+                  <option value="internal">داخليه</option>
+                  <option value="external">خارجيه</option>
+                  <option value="both">كلاهما</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+              <select class="form-control" name="status" [ngModel]="new.status" id="status" required>  
+                <option value="1">فعال</option>
+                <option value="0">غير فعال</option>
+              </select>
+            </div>
+  
+            <div class="col-12 col-sm-12 col-md-12">
+                <div class="form-group">
+                    <label for="description" style="float: right;margin-right: 5px"> الوصف باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" [ngModel]="new.description" required>
+                  </quill-editor>
+                </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-12">
+                <div class="form-group">
+                    <label for="description_en" style="float: right;margin-right: 5px"> الوصف باللغه الانجليزيه <span class="spanReqired-w">*</span></label>
+                    <quill-editor id="description_en" name="description_en" [ngModel]="new.description_en" required>
+                    <!-- <textarea cols="3" class="form-control" id="description_en" name="description_en" [ngModel]="new.description_en" required></textarea> -->
+                  </quill-editor>
+                </div>
+            </div>
+
+              
+  
+          </div>
+          
+          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+
+        </form>
+
+      </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/news/add-news/add-news.component.ts

@@ -0,0 +1,178 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { NewService } from './../../../shared/new.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { UserService } from '../../../shared/user.service';
+import { NgForm } from '@angular/forms';
+import * as Quill from 'quill';
+
+
+@Component({
+  selector: 'app-add-news',
+  templateUrl: './add-news.component.html',
+  styleUrls: ['./add-news.component.css']
+})
+export class AddNewsComponent implements OnInit {
+
+  @ViewChild('f') newForm: NgForm;
+  typeMode: boolean = false;
+  newId: number;
+  checkChangeImage: boolean = false;
+  checkValidImg: boolean = true;
+  imageBase64: string = '';
+  photoType: string = '';
+  typeLink: string = '';
+  photoEdit:boolean = true;
+
+
+  new = {
+    title: '',
+    title_en: '',
+    ranking: '',
+    display_location: '',
+    type: '',
+    status: '',
+    description: '',
+    description_en: '',
+  }
+
+  urlImg: string =  '../../assets/image/avatar.png';
+
+  
+
+  constructor(private newService: NewService,
+    private userService: UserService,
+    private authSer: AuthServiceService,
+    private location: Location,
+    private toastr: ToastrService,
+    private route: ActivatedRoute, 
+    private authService: AuthServiceService,
+    private spineer: NgxSpinnerService) { }
+
+  ngOnInit() {
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeNewMode'] == 'edit') {
+          this.typeLink = 'تعديل';
+          this.spineer.show();
+          this.typeMode = true;
+          this.newId = params['editNewId'];
+          this.newService.getNewData(this.newId).subscribe(
+            (responce) => {
+              console.log(responce);
+              const newData = responce['report'];
+              console.log(newData);
+              this.new.title = newData.title;
+              this.new.title_en = newData.title_en;
+              this.new.ranking = newData.ranking;
+              this.new.display_location = newData.display_location;
+              this.new.type = newData.type;
+              this.new.status = newData.status;
+              this.new.description = newData.description;
+              this.new.description_en = newData.description_en;
+              if(responce['report'].photo) {
+                this.checkValidImg = false;
+                this.urlImg = this.authService.pathImg + responce['report'].photo;
+              }
+              this.spineer.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        } else {
+          this.typeLink = 'إنشاء جديد';
+        }
+      }
+    );
+  }
+
+
+  onFileChanges(event) {
+    console.log(event);
+    this.imageBase64 = event[0].base64;
+    this.photoType = event[0].type.split('/');
+    console.log(this.photoType[1]);
+    //console.log(this.imageBase64);
+    this.checkChangeImage = true;
+    this.checkValidImg = false;
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+  //submitted form
+  onSubmitted() {
+    const formData = this.newForm.value;
+
+    if(this.checkChangeImage){
+      formData['photo'] = this.imageBase64;
+      formData['photo_type'] = this.photoType[1];
+    }else {
+      delete formData.photo;
+      delete formData.photo_type; 
+      this.photoEdit = false
+      console.log(formData);
+    }
+    
+    if(this.typeMode){
+      if(this.photoType[1] != 'png' && this.photoEdit == true) {
+        this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+      } else if(this.imageBase64 == '' && this.photoEdit == true){
+        this.toastr.warning('قم باختيار صوره !');
+      } else {
+        // formData['photo'] = this.imageBase64;
+        // formData['photo_type'] = this.photoType[1];
+        this.newService.editNew(formData, this.newId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت التعديل بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل !');
+          }
+        );
+      }
+    } else {
+      if(this.photoType[1] != 'png') {
+        this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+      } else if(this.imageBase64 == ''){
+        this.toastr.warning('قم باختيار صوره !');
+      } else {
+        // formData['photo'] = this.imageBase64;
+        // formData['photo_type'] = this.photoType[1];
+        this.newService.addNew(formData).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تمت الاضافه بنجاح');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الحفظ !');
+          }
+        );
+      }
+    }
+  }
+}

src/app/dashboard/news/news-list/news-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}

src/app/dashboard/news/news-list/news-list.component.html

@@ -0,0 +1,91 @@
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي / </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">الأخبار</li>
+        </ul>
+      <hr class="hr">
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn">إنشاء</button>
+        <button type="button" class="btn btn-outline-danger dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn">حذف</button>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+      <div class="form-group">
+        <input type="text" placeholder="البحث" class="form-control" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+        <hr>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-6">
+      <div class="form-group">
+        <span class="spanSelect-w">أظهر
+          <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+            <option value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+          </select>
+          من العناصر
+        </span>
+      </div>
+    </div>
+    <div class="col-12 col-sm-12 col-md-6">
+    
+    </div>
+</div>
+  
+  <table class="table table-bordered">
+    <thead class="headBackground-w">
+      <tr>
+        <th>
+          <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+          </div>
+        </th>
+        <th>العنوان</th>
+        <th>الترتيب</th>
+        <th> الحاله</th>
+        <th>تاريخ الأنشاء</th>
+        <th>موقع العرض</th>
+        <th>الناشر</th>
+        <th *ngIf="authSer.showEditBtn">تعديل</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let news of newsList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+        <td>
+          <div class="custom-control custom-checkbox centerIneerItem">
+            <input type="checkbox" class="custom-control-input" id="{{news.id}}" [(ngModel)]="news.selected" [value]='news' (change)="checkIfAllSelected();">
+            <label class="custom-control-label disblayBlock-w" for="{{news.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+          </div>
+        </td>
+        <td>{{news.title}}</td>
+        <td>
+          {{news.ranking}}
+          <!-- <select class="form-control" [ngModel]="news.ranking" (change)="changeRanking($event, news.id)">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+          </select> -->
+        </td>
+        <td>{{news.status == '0' ? 'نشر' : news.status == '1' ? 'مسوده' : 'not found'}}</td>
+        <td>{{news.created_at}}</td>
+        <td>{{news.display_location == 'internal' ? 'داخلي' : news.status == 'external' ? 'خارجي' : 'كلاهما'}}</td>
+        <td>{{news.created_by}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(news.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
+</div>

src/app/dashboard/news/news-list/news-list.component.ts

@@ -0,0 +1,261 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../../shared/user.service';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { NewService } from '../../../shared/new.service';
+
+@Component({
+  selector: 'app-news-list',
+  templateUrl: './news-list.component.html',
+  styleUrls: ['./news-list.component.css']
+})
+export class NewsListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,    
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private newService: NewService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  pageId: number;
+  newsList = [];
+  newsListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+
+
+  ngOnInit() {
+
+    this.spinner.show();
+    //init the values of permision boolean
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['newsPageId'];
+      }
+    );
+
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['newsPageId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 13) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_report'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_report'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_reports'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.newService.getnewsList(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.newsList = responce['reports'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.newsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+    //make all checkbox of user checked 
+    selectAll() {
+      for (var i = 0; i < this.newsList.length; i++) {
+        this.newsList[i].selected = this.selectedAll;
+      }
+    }
+  
+    checkIfAllSelected() {
+      this.selectedAll = this.newsList.every(function(item:any) {
+        return item.selected == true;
+      });
+    }
+  
+    //filtter function
+    filtterFunc(data) {
+      this.newsList = [];
+      console.log(data.target.value);
+      const dataSearch = data.target.value;     
+      this.currentPage = 1;
+      this.newService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.newsList = responce['reports'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('filtter count', this.count);
+          console.log('filtter perPagePAgenation', this.perPagePagenation);
+        },
+        (error) => {
+          console.log(error)
+        }
+      );
+    };
+  
+      //change page 
+      onPageChange(pagenationNumber) {
+        this.spinner.show();
+        this.currentPage = pagenationNumber;
+        this.newsList = [];
+        //console.log(pagenationNumber);
+        //console.log(this.pageId);
+        this.newService.getnewsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.newsList = responce['reports'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log(this.newsList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+      }
+  
+    changeRanking(event, id) {
+      const data = {
+        id: id,
+        ranking: event.target.value,
+      };
+      console.log(data);
+      this.http.post(this.authSer.pathApi + '/rank_report', data).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.newService.getnewsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.count = responce['count'];
+              this.perPagePagenation = responce['per_page'];
+              this.newsList = responce['reports'];
+              console.log(this.newsList);
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
+        },
+        (error) => {console.log(error)},
+      );
+    };
+  
+    //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.newsList = [];
+      this.dataTableNumber = event.target.value;
+      this.newService.getnewsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.newsList = responce['reports'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+    
+    onDelete() {
+      this.newsListIds = [];
+      for(let i = 0; i < this.newsList.length; i++) {
+        if(this.newsList[i].selected == true) {
+          this.newsListIds.push(this.newsList[i].id);
+        }
+      }
+  
+      console.log(this.newsListIds);
+  
+      this.newService.deleteNew(this.newsListIds).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم الحذف');
+          window.location.reload();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        },
+      );
+    };
+  
+    //add function
+    onAdd() {
+      console.log('service/' + this.userLoginId + '/' + this.serviceId + '/addNews');
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/addNews']);
+    }
+  
+    //edit function
+     onEdit(editNewID) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'new/edit/' + editNewID]);
+    }
+    
+
+}

src/app/dashboard/report-list/report-list.component.css

@@ -0,0 +1,49 @@
+.reportList-w {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+.rightFloat {
+    float: right;
+    width: 80%;
+}
+
+.leftFloat {
+    float: right;
+    margin-top: 12px;
+    margin-right: 7px;
+}

src/app/dashboard/report-list/report-list.component.html

@@ -0,0 +1,42 @@
+<div class="reportList-w">
+  <div class="container">
+      <div class="row" *ngIf="permissionsTable">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث عن الأسم" class="form-control rightFloat searchInput-w" style="margin-top:13px;" [(ngModel)]="name"/>
+            <button class="btn btn-success leftFloat" (click)="onSearchName()">ابحث</button>
+          </div>
+        </div>
+      </div>
+    
+      <table class="table table-bordered text-center" *ngIf="permissionsTable">
+        <thead>
+          <tr>
+            <th>الاسم</th>
+            <th>البريد الإلكتروني</th>
+            <th>التقارير</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let user of usersList; let i = index ">
+            <td>{{user.name}}</td>
+            <td>{{user.email}}</td>
+            <td><button class="btn btn-outline-secondary" (click)="onGetReport(user.id)"><i class="fas fa-address-card"></i></button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="row"  *ngIf="pagesTable">
+        <div class="col-6">
+          <div class="form-group">
+            <label style="float:right">المجموعات</label>
+            <select class="form-control" [(ngModel)]="roleVal" name="roleVal" (change)="onGetRoles(roleVal)">
+              <option *ngFor="let role of rolesList" [value]="role.id">{{role.role_name}}</option>
+            </select>
+            <button class="btn btn-success" (click)="getRoleReport()" style="float:right; margin:10px 0;">ابحث</button>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+</div>
+

src/app/dashboard/report-list/report-list.component.ts

@@ -0,0 +1,127 @@
+import { ReportService } from './../../shared/report.service';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { UserService } from './../../shared/user.service';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-report-list',
+  templateUrl: './report-list.component.html',
+  styleUrls: ['./report-list.component.css']
+})
+
+export class ReportListComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,
+    private userSer: UserService,
+    private router: Router,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private reportService:ReportService,
+    private spinner: NgxSpinnerService,
+    private http: HttpClient) { }
+
+  reportType: string;
+  permissionsTable:boolean = false;
+  pagesTable:boolean = false;
+  name:string = '';
+  usersList = [];
+  rolesList= [];
+  roleValue:number;
+ 
+  typeRoleReport:string //to determine the type 0f report of role
+
+  ngOnInit() {
+
+    this.userSer.getUserDataProfile();
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportType = params['reportName'];
+        if(this.reportType == 'reportPermissions') {
+          this.permissionsTable = true;
+        } else if(this.reportType == 'reportPages') {
+          this.typeRoleReport = 'reportPages';
+          this.spinner.show();
+          this.pagesTable = true;
+          this.http.get(this.authSer.pathApi + '/roles_list').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.rolesList = responce['roles'];
+              console.log(this.rolesList);
+              this.spinner.hide();
+            }
+          )
+        } else if(this.reportType == "reportUsers") {
+          this.spinner.show();
+          this.typeRoleReport = 'reportUsers';
+          this.pagesTable = true;
+          this.http.get(this.authSer.pathApi + '/roles_list').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.rolesList = responce['roles'];
+              console.log(this.rolesList);
+              this.spinner.hide();
+            }
+          );
+        }
+      }
+    );
+    
+  }
+
+
+
+
+  onSearchName() {
+    this.spinner.show();
+    console.log(this.name);
+    this.http.get(this.authSer.pathApi + '/find_user/' + this.name).subscribe(
+      (responce) => {
+        console.log(responce);
+        if(responce['users'].length == 0) {
+          this.toastr.warning('لا يوجد مستخدمين بهذا الاسم');
+        } else {
+          this.usersList = responce['users'];
+          console.log(this.usersList);
+        }
+
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  onGetRoles(roleVal) {
+    console.log(roleVal);
+    this.roleValue = roleVal;
+  }
+
+  //on get user  report
+  onGetReport(user_id) {
+    this.router.navigate(['userreport/' + user_id]);
+  }
+
+  getRoleReport() {
+    if(this.typeRoleReport == 'reportPages') {
+      this.router.navigate(['roleReport/' + this.roleValue]);
+    } else if(this.typeRoleReport == 'reportUsers') {
+      this.router.navigate(['userInRoleReport/' + this.roleValue]);
+    }
+  }
+
+ 
+
+}