diff --git a/package-lock.json b/package-lock.json
index 033f7a4..8294f38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1716,6 +1716,16 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.14.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.9.tgz",
+      "integrity": "sha512-64RiH2ON4/y8qYtoa8rUiyam/tUVyGqRyNYhe+vCRGmjnV4bUlZvY+mwd0RrmLoCpJpdq3RsrNqKb7SJdw/4kw==",
+      "optional": true,
+      "requires": {
+        "core-js-pure": "^3.16.0",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
@@ -3076,6 +3086,12 @@
       "integrity": "sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.3.tgz",
+      "integrity": "sha512-MBIou8pd/41jkff7s97B47bc9+p0BszqqDJsO51yDm49uUxeKzrfuNl5fSLC6BpLEWKA8zlwyqALVmXrFwoBHQ==",
+      "dev": true
+    },
     "@types/form-data": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
@@ -3208,6 +3224,12 @@
       "integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@types/sizzle": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
@@ -3702,6 +3724,15 @@
         "regex-parser": "^2.2.11"
       }
     },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "after": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -4021,8 +4052,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "atomically": {
       "version": "1.7.0",
@@ -4849,6 +4879,11 @@
         "node-int64": "^0.4.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -4972,12 +5007,36 @@
       "integrity": "sha512-feylzsbDxi1gPZ1IjystzIQZagYYLvfKrSuygUCgf7z6x790VEzze5QEkdSV1U58RA7Hi0+v6fv4K54atOzATg==",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.7.tgz",
+      "integrity": "sha512-4sq6iL5Q4VOXS3PL1BapiXIZItpxYyANVzsAKpTPS5oq4u3SKbGfUcbZh2gdLCQ3jWpG/y5wRkMlBBAJhXeiZA==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime-corejs3": "^7.9.6",
+        "@types/raf": "^3.4.0",
+        "raf": "^3.4.1",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^5.0.5"
+      }
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "crc-32": "~1.2.0",
+        "printj": "~1.1.2"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5298,6 +5357,22 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "~2.14.1",
+        "exit-on-epipe": "~1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -5762,8 +5837,7 @@
     "core-js": {
       "version": "3.15.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.1.tgz",
-      "integrity": "sha512-h8VbZYnc9pDzueiS2610IULDkpFFPunHwIpl8yRwFahAEEdSpHlTy3h3z3rKq5h11CaUdBEeRViu9AYvbxiMeg==",
-      "dev": true
+      "integrity": "sha512-h8VbZYnc9pDzueiS2610IULDkpFFPunHwIpl8yRwFahAEEdSpHlTy3h3z3rKq5h11CaUdBEeRViu9AYvbxiMeg=="
     },
     "core-js-compat": {
       "version": "3.15.2",
@@ -5783,6 +5857,12 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.1.tgz",
+      "integrity": "sha512-TyofCdMzx0KMhi84mVRS8rL1XsRk2SPUNz2azmth53iRN0/08Uim9fdhQTaZTG1LqaXHYVci4RDHka6WrXfnvg==",
+      "optional": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -5802,6 +5882,15 @@
         "yaml": "^1.10.0"
       }
     },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "~1.0.1",
+        "printj": "~1.1.0"
+      }
+    },
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -6009,6 +6098,23 @@
         }
       }
     },
+    "css-line-break": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
+      "integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+          "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+          "optional": true
+        }
+      }
+    },
     "css-loader": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
@@ -6836,6 +6942,12 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.0.tgz",
+      "integrity": "sha512-VV5C6Kr53YVHGOBKO/F86OYX6/iLTw2yVSI721gKetxpHCK/V5TaLEf9ODjRgl1KLSWRMY6cUhAbv/c+IUnwQw==",
+      "optional": true
+    },
     "domutils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
@@ -7595,6 +7707,11 @@
       "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
       "dev": true
     },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -8015,6 +8132,11 @@
       "integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==",
       "dev": true
     },
+    "fflate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -8033,6 +8155,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -8228,6 +8355,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -8861,6 +8993,15 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.2.2.tgz",
+      "integrity": "sha512-cxZR1bGxtmhxeoCxM+s1WfRzDtpKPuHHZ7ExX01EdhgdEQCvMDZLDj3aknE8ywSoed8JM8AXhQiuD1KFwMm3Gw==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "2.0.1"
+      }
+    },
     "http-basic": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/http-basic/-/http-basic-8.1.3.tgz",
@@ -11984,6 +12125,27 @@
       "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
       "dev": true
     },
+    "jspdf": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.3.1.tgz",
+      "integrity": "sha512-1vp0USP1mQi1h7NKpwxjFgQkJ5ncZvtH858aLpycUc/M+r/RpWJT8PixAU7Cw/3fPd4fpC8eB/Bj42LnsR21YQ==",
+      "requires": {
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      },
+      "dependencies": {
+        "fflate": {
+          "version": "0.4.8",
+          "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+          "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+        }
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -14046,8 +14208,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.3.0",
@@ -15984,6 +16145,11 @@
         }
       }
     },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
     "proc-log": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-1.0.0.tgz",
@@ -16110,6 +16276,15 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randexp": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.5.3.tgz",
@@ -16360,8 +16535,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -16702,6 +16876,12 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -17795,6 +17975,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
@@ -17855,6 +18043,12 @@
         }
       }
     },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -18232,6 +18426,12 @@
         }
       }
     },
+    "svg-pathdata": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-5.0.5.tgz",
+      "integrity": "sha512-TAAvLNSE3fEhyl/Da19JWfMAdhSXTYeviXsLSoDT1UM76ADj5ndwAPX1FKQEgB/gFMPavOy6tOqfalXKUiXrow==",
+      "optional": true
+    },
     "svgo": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
@@ -20510,6 +20710,16 @@
         }
       }
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -20572,6 +20782,30 @@
       "integrity": "sha512-2c6faOUH/nhoQN6abwMloF7Iyl0ZS2E9HGtsiLrWn0zOOMWlhtDmdf/uihDt6jnuCxgtwGBNy6Onsoy2s2O2Ow==",
       "dev": true
     },
+    "xlsx": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.17.0.tgz",
+      "integrity": "sha512-bZ36FSACiAyjoldey1+7it50PMlDp1pcAJrZKcVZHzKd8BC/z6TQ/QAN8onuqcepifqSznR6uKnjPhaGt6ig9A==",
+      "requires": {
+        "adler-32": "~1.2.0",
+        "cfb": "^1.1.4",
+        "codepage": "~1.14.0",
+        "commander": "~2.17.1",
+        "crc-32": "~1.2.0",
+        "exit-on-epipe": "~1.0.1",
+        "fflate": "^0.3.8",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        }
+      }
+    },
     "xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
diff --git a/package.json b/package.json
index ca26adf..9890af0 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,9 @@
     "chart.js": "^3.5.0",
     "chartist": "^0.11.4",
     "dayjs": "1.10.5",
+    "file-saver": "^2.0.5",
     "jquery": "^3.6.0",
+    "jspdf": "^2.3.1",
     "jw-angular-social-buttons": "^1.0.0",
     "ng-chartist": "^5.0.0",
     "ngx-infinite-scroll": "10.0.1",
@@ -102,6 +104,7 @@
     "swiper": "^6.7.5",
     "tslib": "2.3.0",
     "webstomp-client": "1.2.6",
+    "xlsx": "^0.17.0",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
@@ -113,6 +116,7 @@
     "@angular/service-worker": "12.0.5",
     "@types/bootstrap": "^5.0.17",
     "@types/chartist": "^0.11.1",
+    "@types/file-saver": "^2.0.3",
     "@types/jest": "26.0.23",
     "@types/jquery": "^3.5.6",
     "@types/node": "15.12.2",
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
index 30ab14e..3a64b9c 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
@@ -1,5 +1,15 @@
 <div class="content">
-  <div class="container-fluid">
+  <div class="py-2">
+    <button type="button" class="ds-btn ds-btn--primary" (click)="exportReportesGeneralesAdministradorExcel()">Export as Excel</button>
+    <button type="button" class="ds-btn ds-btn--primary" (click)="exportReportesGeneralesAdministradorPDF()">Export as PDF</button>
+    <button type="button" [hidden]="reportsGeneral" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
+      Ver Reporte de Usuarios
+    </button>
+    <button type="button" [hidden]="reportForUsers" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
+      Ver Reporte Generales
+    </button>
+  </div>
+  <div class="container-fluid py-5" [hidden]="reportsGeneral">
     <div class="row justify-content-around">
       <div class="col-lg-3 col-sm-6">
         <div class="card">
@@ -13,7 +23,7 @@
               <div class="col-xs-7 w-50">
                 <div class="numbers">
                   <p class="ds-title">Ganancias por plantillas</p>
-                  {{ gananciasTotales | currency: 'CR' }}
+                  ${{ gananciasTotales | number: '1.2' }}
                 </div>
               </div>
             </div>
@@ -135,5 +145,102 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="blue" style="background-color: #88c5d6eb">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #082463">Encuestas En Borrador</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyDraft" class="chart-circle">{{ encuestasBorrador }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="green" style="background-color: #67ceb6">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #0a2922">Encuestas Publicadas</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyActive" class="chart-circle">{{ encuestasPublicadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" style="background-color: #de8e78">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #671a04">Encuestas Finalizadas</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyFinished" class="chart-circle">{{ encuestasFinalizadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="brown" style="background-color: #d6c1ab">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #252422">Encuestas Completadas por Usuarios</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyCountCompletede" class="chart-circle">{{ encuestasCompletadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container-fluid" [hidden]="reportForUsers">
+    <div class="row justify-content-around">
+      <div class="col-md-10">
+        <div class="card encuestas-por-usuario">
+          <div class="card-header w-100">
+            <h4 class="ds-title">Reporte de Encuestas Usuarios</h4>
+          </div>
+          <div class="card-content">
+            <div class="row">
+              <div class="col-md-12">
+                <div class="table-responsive">
+                  <table class="table">
+                    <thead>
+                      <tr>
+                        <th>Usuario</th>
+                        <th></th>
+                        <th>Total de encuestas</th>
+                        <th>Encuestas en borrador</th>
+                        <th>Encuestas publicadas</th>
+                        <th>Encuestas finalizadas</th>
+                        <th>Encuestas completadas por usuario</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let usuario of usuarios; let j = index; trackBy: trackIdUsuario">
+                        <td>
+                          <div class="photo mb-2"><img src="../../../../content/profile_icons/C{{ usuario.iconoPerfil }}.png" /></div>
+                        </td>
+                        <td>{{ usuario.nombre }}</td>
+                        <td class="text-center">
+                          {{ encuestasUsuario[j] }}
+                        </td>
+                        <td class="text-center">
+                          {{ encuestasUsuarioBorrador[j] }}
+                        </td>
+                        <td class="text-center">
+                          {{ encuestasUsuarioPublicadas[j] }}
+                        </td>
+                        <td class="text-center">
+                          {{ encuestasUsuarioFinalizadas[j] }}
+                        </td>
+                        <td class="text-center">
+                          {{ encuestasUsuarioCompletadas[j] }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
index 653e090..487f841 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
@@ -1,10 +1,10 @@
 .ct-chart {
-  width: 600px;
+  width: 100%;
   height: 400px;
   overflow-x: scroll;
 }
 .grafico-encuestas-fecha .card {
-  width: 600px;
+  width: 100%;
 }
 
 .card .icon-big {
@@ -26,9 +26,21 @@
 .encuestas-por-categoria .table-responsive {
   height: 300px;
   max-height: 300px;
-  overflow-x: none;
 }
 
 .por-categoria {
   padding: 5% 0;
 }
+.encuestas-por-usuario .table-responsive {
+  height: 500px;
+  max-height: 500px;
+}
+
+.encuestas-por-usuario .photo {
+  width: 40px;
+  height: 40px;
+}
+
+.encuestas-por-usuario .photo img {
+  border-radius: 100%;
+}
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
index fede9c0..3cd2e69 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import * as XLSX from 'xlsx';
+import * as FileSaver from 'file-saver';
+import { jsPDF } from 'jspdf';
+import { exportAsExcelFile, exportAsExcelTable } from '../export/export_excel';
+import { generatePDFTableData, createPDFTableHeaders, generatePDFTable } from '../export/export_pdf';
 
 import { FacturaService } from '../../factura/service/factura.service';
 import { UsuarioExtraService } from '../../usuario-extra/service/usuario-extra.service';
@@ -12,6 +17,8 @@ import { finalize } from 'rxjs/operators';
 import * as Chartist from 'chartist';
 
 import { faWallet, faUsers, faUsersSlash } from '@fortawesome/free-solid-svg-icons';
+import { IUsuarioExtra } from '../../usuario-extra/usuario-extra.model';
+import { IUser } from '../../user/user.model';
 
 @Component({
   selector: 'jhi-dashboard-admin',
@@ -28,9 +35,23 @@ export class DashboardAdminComponent implements OnInit {
   gananciasTotales: number = 0;
   categorias: ICategoria[] | undefined = [];
   encuestas: IEncuesta[] | undefined = [];
+  usuarios: IUsuarioExtra[] | undefined = [];
   faWallet = faWallet;
   faUsers = faUsers;
   faUsersSlash = faUsersSlash;
+  encuestasPublicadas: number = 0;
+  encuestasFinalizadas: number = 0;
+  encuestasBorrador: number = 0;
+  encuestasCompletadas: number = 0;
+  encuestasUsuario: number[] = [];
+  encuestasUsuarioPublicadas: number[] = [];
+  encuestasUsuarioFinalizadas: number[] = [];
+  encuestasUsuarioBorrador: number[] = [];
+  encuestasUsuarioCompletadas: number[] = [];
+  usuariosGenerales: IUser[] | null = [];
+
+  reportsGeneral = false;
+  reportForUsers = true;
 
   chartFechas = [];
 
@@ -49,32 +70,71 @@ export class DashboardAdminComponent implements OnInit {
     return item.id!;
   }
 
+  trackIdUsuario(_index: number, item: IUsuarioExtra): number {
+    return item.id!;
+  }
+
+  cambiarVista() {
+    if (this.reportsGeneral) {
+      this.reportsGeneral = false;
+      this.reportForUsers = true;
+    } else if (this.reportForUsers) {
+      this.reportsGeneral = true;
+      this.reportForUsers = false;
+    }
+  }
+
   loadAll() {
     this.cargarGananciasTotales();
-    this.cargarCantidadUsuarios();
-    this.cargarEncuestas();
+    this.cargarUsers();
   }
 
   cargarGananciasTotales() {
-    this.facturaService.query().subscribe(
-      res => {
-        const tempFacturas = res.body;
-        tempFacturas?.forEach(f => {
-          if (f.costo != undefined) {
-            this.gananciasTotales += f.costo;
+    this.facturaService.query().subscribe(res => {
+      const tempFacturas = res.body;
+      tempFacturas?.forEach(f => {
+        if (f.costo != undefined) {
+          this.gananciasTotales += f.costo;
+        }
+      });
+    });
+  }
+
+  cargarUsers() {
+    this.usuarioExtraService
+      .retrieveAllPublicUsers()
+      .pipe(finalize(() => this.cargarCantidadUsuarios()))
+      .subscribe(res => {
+        res.forEach(user => {
+          let rolList: string[] | undefined;
+          rolList = user.authorities;
+          let a = rolList?.pop();
+          if (a == 'ROLE_ADMIN') {
+            user.authorities = ['Admin'];
+          } else if (a == 'ROLE_USER') {
+            user.authorities = ['Usuario'];
           }
         });
-      },
-      () => {}
-    );
+        this.usuariosGenerales = res;
+      });
   }
 
   cargarCantidadUsuarios() {
-    this.usuarioExtraService.query().subscribe(res => {
-      const tmpUsuarios = res.body;
-      this.cantUsuarioActivos = tmpUsuarios?.filter(u => u.estado === 'ACTIVE').length;
-      this.cantUsuarioBloqueados = tmpUsuarios?.filter(u => u.estado === 'SUSPENDED').length;
-    });
+    this.usuarioExtraService
+      .query()
+      .pipe(finalize(() => this.cargarEncuestas()))
+      .subscribe(res => {
+        const tmpUsuarios = res.body;
+
+        if (tmpUsuarios) {
+          tmpUsuarios.forEach(u => {
+            u.user = this.usuariosGenerales?.find(g => g.id == u.user?.id);
+          });
+        }
+        this.usuarios = tmpUsuarios?.filter(u => u.user?.authorities && u.user?.authorities[0] === 'Usuario');
+        this.cantUsuarioActivos = tmpUsuarios?.filter(u => u.estado === 'ACTIVE').length;
+        this.cantUsuarioBloqueados = tmpUsuarios?.filter(u => u.estado === 'SUSPENDED').length;
+      });
   }
 
   cargarEncuestas() {
@@ -83,7 +143,61 @@ export class DashboardAdminComponent implements OnInit {
       .pipe(finalize(() => this.cargarCategorias()))
       .subscribe(res => {
         const tmpEncuestas = res.body;
-        this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED');
+        this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED' || e.estado === 'DRAFT');
+        if (tmpEncuestas) {
+          this.encuestasPublicadas = tmpEncuestas.filter(e => e.estado === 'ACTIVE').length;
+          this.encuestasFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED').length;
+          this.encuestasBorrador = tmpEncuestas.filter(e => e.estado === 'DRAFT').length;
+          let cantidadCompletadas: number = 0;
+          tmpEncuestas
+            .filter(e => e.estado === 'ACTIVE')
+            .forEach(e => {
+              const _contadorCompletadas = e.calificacion;
+              cantidadCompletadas = cantidadCompletadas + (Number(_contadorCompletadas?.toString().split('.')[1]) - 1);
+            });
+          this.encuestasCompletadas = cantidadCompletadas;
+
+          //reportes generales de todos los usuarios
+          const publicadasUser: number[] | null = [];
+          const finalizadasUser: number[] | null = [];
+          const borradoresUser: number[] | null = [];
+          const encuestasUser: number[] | null = [];
+          const encuestasCompletadasUser: number[] | null = [];
+
+          if (this.usuarios) {
+            this.usuarios.forEach(u => {
+              let cantEncuestas = 0;
+              let cantPublicadas = 0;
+              let cantFinalizadas = 0;
+              let cantBorradores = 0;
+              cantEncuestas = tmpEncuestas.filter(
+                e => e.estado !== 'DELETED' && e.usuarioExtra?.id === u.id && e.usuarioExtra?.user?.authorities
+              ).length;
+              cantPublicadas = tmpEncuestas.filter(e => e.estado === 'ACTIVE' && e.usuarioExtra?.id === u.id).length;
+              cantFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED' && e.usuarioExtra?.id === u.id).length;
+              cantBorradores = tmpEncuestas.filter(e => e.estado === 'DRAFT' && e.usuarioExtra?.id === u.id).length;
+
+              encuestasUser.push(cantEncuestas);
+              borradoresUser.push(cantBorradores);
+              publicadasUser.push(cantPublicadas);
+              finalizadasUser.push(cantFinalizadas);
+
+              let cantidadCompletadasUser: number = 0;
+              tmpEncuestas
+                .filter(e => e.estado === 'ACTIVE' && e.usuarioExtra?.id === u.id)
+                .forEach(e => {
+                  const _contadorCompletadas = e.calificacion;
+                  cantidadCompletadasUser = cantidadCompletadasUser + (Number(_contadorCompletadas?.toString().split('.')[1]) - 1);
+                });
+              encuestasCompletadasUser.push(cantidadCompletadasUser);
+            });
+            this.encuestasUsuarioCompletadas = encuestasCompletadasUser;
+            this.encuestasUsuario = encuestasUser;
+            this.encuestasUsuarioBorrador = borradoresUser;
+            this.encuestasUsuarioPublicadas = publicadasUser;
+            this.encuestasUsuarioFinalizadas = finalizadasUser;
+          }
+        }
       });
   }
 
@@ -94,11 +208,11 @@ export class DashboardAdminComponent implements OnInit {
       .subscribe(res => {
         const tmpCategorias = res.body;
         this.categorias = tmpCategorias?.filter(c => c.estado === 'ACTIVE');
-        let cantPublicadas = 0;
-        let cantFinalizadas = 0;
         const publicadas: number[] | null = [];
         const finalizadas: number[] | null = [];
         this.categorias?.forEach(c => {
+          let cantPublicadas = 0;
+          let cantFinalizadas = 0;
           this.encuestas?.forEach(e => {
             if (e.categoria?.id === c.id && e.estado === 'ACTIVE') {
               cantPublicadas = cantPublicadas + 1;
@@ -185,4 +299,100 @@ export class DashboardAdminComponent implements OnInit {
     }
     return encuestasPublicadas;
   }
+
+  exportReportesGeneralesAdministradorExcel(): void {
+    /*
+      Cantidad de usuarios activos
+      Cantidad de usuarios bloqueados
+      Cantidad de encuestas publicadas por categoría
+      Cantidad de encuestas finalizadas por categoría
+      Cantidad de encuestas publicadas por mes y año
+
+      Cantidad de encuestas
+      Cantidad de personas que han completado sus encuestas
+      Cantidad de encuestas activas
+      Cantidad de encuestas finalizadas
+      Cantidad de comentarios de retroalimentación
+    */
+
+    const _sheets = ['reportes generales', 'enc. publicadas', 'enc. publicadas categoría', 'enc. finalizadas categoría'];
+
+    const _reporteUsuarios = [
+      {
+        ganancias_plantillas: this.gananciasTotales,
+        usuarios_activos: this.cantUsuarioActivos,
+        usuarios_bloqueados: this.cantUsuarioBloqueados,
+      },
+    ];
+
+    // listaMesesAnnos
+    // encuestasPublicadasMesAnno
+    const _reporteEncuestasPublicadas: any[] = [];
+    this.listaMesesAnnos.forEach((date: any, index) => {
+      let _report: any = {};
+      _report['fecha'] = date;
+      _report['cantidad'] = this.encuestasPublicadasMesAnno[index];
+      _reporteEncuestasPublicadas.push(_report);
+    });
+
+    // this.categorias
+    // this.encuestasPublicadasCategoria
+    const _reporteCantidadEncuestasPublicadasCategoria: any[] = [];
+    this.categorias!.forEach((categoria: any, index) => {
+      let _report: any = {};
+      _report['categoria'] = categoria.nombre;
+      _report['cantidad'] = this.encuestasPublicadasCategoria[index];
+      _reporteCantidadEncuestasPublicadasCategoria.push(_report);
+    });
+
+    // this.categorias
+    // this.encuestasFinalzadasCategoria
+    const _reporteCantidadEncuestasFinalizadasCategoria: any[] = [];
+    this.categorias!.forEach((categoria: any, index) => {
+      let _report: any = {};
+      _report['categoria'] = categoria.nombre;
+      _report['cantidad'] = this.encuestasFinalzadasCategoria[index];
+      _reporteCantidadEncuestasFinalizadasCategoria.push(_report);
+    });
+
+    // exportAsExcelTable();
+
+    const _excelFinalData = [
+      _reporteUsuarios,
+      _reporteEncuestasPublicadas,
+      _reporteCantidadEncuestasPublicadasCategoria,
+      _reporteCantidadEncuestasFinalizadasCategoria,
+    ];
+    const _fileName = 'reportes_datasurvey';
+    exportAsExcelFile(_sheets, _excelFinalData, _fileName);
+  }
+
+  exportReportesGeneralesAdministradorPDF(): void {
+    /*
+      Cantidad de usuarios activos
+      Cantidad de usuarios bloqueados
+      Cantidad de encuestas publicadas por categoría
+      Cantidad de encuestas finalizadas por categoría
+      Cantidad de encuestas publicadas por mes y año
+
+      Cantidad de encuestas
+      Cantidad de personas que han completado sus encuestas
+      Cantidad de encuestas activas
+      Cantidad de encuestas finalizadas
+      Cantidad de comentarios de retroalimentación
+
+    */
+
+    const doc = new jsPDF();
+
+    const _reporteUsuarios = [{ usuarios_activos: '100', usuarios_bloqueados: '50' }];
+    const _docData = generatePDFTableData(_reporteUsuarios);
+
+    const _headers = ['usuarios_activos', 'usuarios_bloqueados'];
+    const _docHeaders = createPDFTableHeaders(_headers);
+    const _fileName = 'reporte_general';
+    const _docTitle = 'Reportes Generales de la Aplicación';
+
+    generatePDFTable(doc, _docData, _docHeaders, _fileName, _docTitle);
+  }
 }
diff --git a/src/main/webapp/app/entities/dashboard/export/export_common.ts b/src/main/webapp/app/entities/dashboard/export/export_common.ts
new file mode 100644
index 0000000..d3a083e
--- /dev/null
+++ b/src/main/webapp/app/entities/dashboard/export/export_common.ts
@@ -0,0 +1,10 @@
+export const generateFileName = (fileName: string, extension: string): string => {
+  return (
+    fileName +
+    '_' +
+    new Date().toLocaleDateString().substr(0, 10).split('/').join('-') +
+    '_' +
+    Math.random().toString().substring(2) +
+    extension
+  );
+};
diff --git a/src/main/webapp/app/entities/dashboard/export/export_excel.ts b/src/main/webapp/app/entities/dashboard/export/export_excel.ts
new file mode 100644
index 0000000..8054a73
--- /dev/null
+++ b/src/main/webapp/app/entities/dashboard/export/export_excel.ts
@@ -0,0 +1,37 @@
+import * as XLSX from 'xlsx';
+import * as FileSaver from 'file-saver';
+import { generateFileName } from './export_common';
+
+const EXCEL_TYPE: string = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION: string = '.xlsx';
+
+export const exportAsExcelFile = (sheetNames: string[], arrayOfData: any[], excelFileName: any) => {
+  const workbook = XLSX.utils.book_new();
+
+  arrayOfData.forEach((data, index) => {
+    let sheetName = sheetNames[index];
+    let worksheet = XLSX.utils.json_to_sheet(data);
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+  });
+
+  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+  saveAsExcelFile(excelBuffer, excelFileName);
+};
+
+const saveAsExcelFile = (buffer: any, fileName: any) => {
+  const data = new Blob([buffer], { type: EXCEL_EXTENSION });
+  const generatedFileName = generateFileName(fileName, EXCEL_EXTENSION);
+
+  FileSaver.saveAs(data, generatedFileName);
+};
+
+export const exportAsExcelTable = () => {
+  const workbook = XLSX.utils.book_new();
+
+  let worksheet = XLSX.utils.json_to_sheet([{ test: 1 }, { test: 2 }]);
+
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'test');
+
+  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+  saveAsExcelFile(excelBuffer, 'test');
+};
diff --git a/src/main/webapp/app/entities/dashboard/export/export_pdf.ts b/src/main/webapp/app/entities/dashboard/export/export_pdf.ts
new file mode 100644
index 0000000..a5431aa
--- /dev/null
+++ b/src/main/webapp/app/entities/dashboard/export/export_pdf.ts
@@ -0,0 +1,38 @@
+import { jsPDF } from 'jspdf';
+import { generateFileName } from './export_common';
+
+const PDF_EXTENSION: string = '.pdf';
+
+export const generatePDFTableData = (data: any): any => {
+  const result: any = [];
+
+  data.forEach((item: any) => {
+    result.push(Object.assign({}, item));
+  });
+
+  return result;
+};
+
+export const createPDFTableHeaders = (keys: any): any[] => {
+  let result = [];
+  for (let i = 0; i < keys.length; i += 1) {
+    result.push({
+      id: keys[i],
+      name: keys[i],
+      prompt: keys[i],
+      width: 65,
+      align: 'center',
+      padding: 0,
+    });
+  }
+  return result;
+};
+
+export const generatePDFTable = (doc: jsPDF, _docData: any, _docHeaders: string[], _fileName: string, _docTitle: string): void => {
+  doc.setFontSize(20);
+  doc.setFont('helvetica', 'bold');
+  doc.text(_docTitle, 20, 20);
+  doc.table(20, 30, _docData, _docHeaders, { autoSize: true });
+  const generatedFileName = generateFileName(_fileName, PDF_EXTENSION);
+  doc.save(generatedFileName);
+};
diff --git a/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts b/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts
index d2445a1..0cfb0f2 100644
--- a/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts
+++ b/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts
@@ -72,6 +72,11 @@ export class EncuestaDetailComponent implements OnInit {
     this.activatedRoute.data.subscribe(({ encuesta }) => {
       if (encuesta) {
         this.encuesta = encuesta;
+
+        // Fix calificacion
+        const _calificacion = encuesta.calificacion;
+        this.encuesta!.calificacion = Number(_calificacion?.toString().split('.')[0]);
+
         this.loadAll();
       } else {
         this.previousState();
diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
index 6761b1a..09e79e8 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
@@ -177,6 +177,13 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
       (res: HttpResponse<IEncuesta[]>) => {
         this.isLoading = false;
         const tmpEncuestas = res.body ?? [];
+
+        // Fix calificacion
+        tmpEncuestas.forEach(encuesta => {
+          const _calificacion = encuesta.calificacion;
+          encuesta.calificacion = Number(_calificacion?.toString().split('.')[0]);
+        });
+
         if (this.isAdmin()) {
           this.encuestas = tmpEncuestas.filter(e => e.estado !== EstadoEncuesta.DELETED);
 
@@ -418,7 +425,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
       nombre: this.editForm.get(['nombre'])!.value,
       descripcion: this.editForm.get(['descripcion'])!.value,
       fechaCreacion: dayjs(now, DATE_TIME_FORMAT),
-      calificacion: 5,
+      calificacion: 5.1,
       acceso: this.editForm.get(['acceso'])!.value,
       contrasenna: undefined,
       estado: EstadoEncuesta.DRAFT,
diff --git a/src/main/webapp/app/entities/plantilla/list/plantilla.component.html b/src/main/webapp/app/entities/plantilla/list/plantilla.component.html
index 8ea63f7..4c2782e 100644
--- a/src/main/webapp/app/entities/plantilla/list/plantilla.component.html
+++ b/src/main/webapp/app/entities/plantilla/list/plantilla.component.html
@@ -91,7 +91,7 @@
           <td>{{ plantilla.categoria?.nombre }}</td>
           <td class="text-right">
             <div class="btn-group">
-              <button
+              <!-- <button
                 type="submit"
                 [routerLink]="['/plantilla', plantilla.id, 'view']"
                 class="ds-btn ds-btn--secondary btn-sm"
@@ -99,7 +99,7 @@
               >
                 <fa-icon icon="eye"></fa-icon>
                 <span class="d-none d-md-inline">Vista previa</span>
-              </button>
+              </button> -->
               <button
                 type="submit"
                 [routerLink]="['/plantilla', plantilla.id, 'edit']"
diff --git a/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.html b/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.html
index 8f4999e..19ce233 100644
--- a/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.html
+++ b/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.html
@@ -4,6 +4,7 @@
       <p class="ds-title ds-contenteditable" contenteditable="true" spellcheck="false" (blur)="updateTemplateName($event)">
         {{ plantilla!.nombre }}
       </p>
+      &nbsp;&nbsp;<fa-icon class="ds-info--icon" [icon]="faEye" (click)="openPreview()"></fa-icon>
     </div>
 
     <p class="ds-subtitle">Creada el día {{ plantilla!.fechaCreacion | formatShortDatetime | lowercase }}</p>
diff --git a/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.ts b/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.ts
index 3ccf1f5..5e11b79 100644
--- a/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.ts
+++ b/src/main/webapp/app/entities/plantilla/update/plantilla-update.component.ts
@@ -186,7 +186,7 @@ export class PlantillaUpdateComponent implements OnInit, AfterViewChecked {
 
   openPreview() {
     const surveyId = this.plantilla?.id;
-    this.router.navigate(['/plantilla', surveyId, 'preview']);
+    this.router.navigate(['/plantilla', surveyId, 'view']);
   }
 
   resetForm(event: any): void {
diff --git a/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.ts b/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.ts
index 22fe062..bdffc05 100644
--- a/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.ts
+++ b/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.ts
@@ -83,7 +83,7 @@ export class UsuarioPlantillasComponent implements OnInit {
       nombre: 'This is a survey',
       descripcion: 'This is a survey',
       fechaCreacion: dayjs(now, DATE_TIME_FORMAT),
-      calificacion: 5,
+      calificacion: 5.1,
       acceso: AccesoEncuesta.PUBLIC,
       contrasenna: undefined,
       estado: EstadoEncuesta.DRAFT,
diff --git a/src/main/webapp/app/pagina-principal/pagina-principal.component.ts b/src/main/webapp/app/pagina-principal/pagina-principal.component.ts
index df5a08f..6aeee95 100644
--- a/src/main/webapp/app/pagina-principal/pagina-principal.component.ts
+++ b/src/main/webapp/app/pagina-principal/pagina-principal.component.ts
@@ -86,6 +86,13 @@ export class PaginaPrincipalComponent implements OnInit {
       (res: HttpResponse<IEncuesta[]>) => {
         this.isLoading = false;
         const tmpEncuestas = res.body ?? [];
+
+        // Fix calificacion
+        tmpEncuestas.forEach(encuesta => {
+          const _calificacion = encuesta.calificacion;
+          encuesta.calificacion = Number(_calificacion?.toString().split('.')[0]);
+        });
+
         this.encuestas = tmpEncuestas.filter(e => e.estado === 'ACTIVE' && e.acceso === 'PUBLIC');
       },
       () => {
diff --git a/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss b/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
index d730aa6..42e86d3 100644
--- a/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
@@ -46,3 +46,40 @@
     }
   }
 }
+
+.card-circle-chart {
+  .card-header {
+    &:first-child {
+      border-radius: 12px;
+    }
+  }
+
+  .card-title {
+    font-size: 1.2em;
+    font-weight: 700;
+    margin-top: 10px;
+  }
+  .card-content {
+    color: #fff;
+    padding: 10px 15px 10px;
+    text-align: center;
+  }
+  .chart-circle {
+    display: inline-block;
+    font-size: 2em;
+    height: 160px;
+    line-height: 160px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    position: relative;
+    text-align: center;
+    width: 160px;
+    canvas {
+      position: absolute;
+      top: 0;
+      left: -4px;
+      border: 4px solid #ffffffc4;
+      border-radius: 100%;
+    }
+  }
+}