diff --git a/package-lock.json b/package-lock.json
index a6e18a0983de92d34d6f41fcb4ea8da6a70a84a7..fa464e9e9fac1fb5c89f68510455be81fdef0beb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1936,6 +1936,49 @@
         "chalk": "^3.0.0"
       },
       "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "@parcel/logger": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.0.0-beta.2.tgz",
+          "integrity": "sha512-YuTUGN47eMctdtTx0hhqKUCRCtuqqV+n6MRrm5sTlg/XpZP8ySUnq4+8VqMqslB761GgXmaDKtNIebe0lc+Erw==",
+          "dev": true,
+          "requires": {
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/events": "2.0.0-beta.2"
+          }
+        },
+        "@parcel/utils": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.0.0-beta.2.tgz",
+          "integrity": "sha512-v8vFGdUY/IuuL7dvmdNxhv4TowgqYDxupToxEvMix1GePRx7QTV1ugy/uWgMXhNIytFo4qyo1fWD7VcXLMS1TQ==",
+          "dev": true,
+          "requires": {
+            "@iarna/toml": "^2.2.0",
+            "@parcel/codeframe": "2.0.0-beta.2",
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/logger": "2.0.0-beta.2",
+            "@parcel/markdown-ansi": "2.0.0-beta.2",
+            "@parcel/source-map": "2.0.0-alpha.4.21",
+            "ansi-html": "^0.0.7",
+            "chalk": "^4.1.0",
+            "clone": "^2.1.1",
+            "fast-glob": "3.1.1",
+            "fastest-levenshtein": "^1.0.8",
+            "is-glob": "^4.0.0",
+            "is-url": "^1.2.2",
+            "json5": "^1.0.1",
+            "lru-cache": "^6.0.0",
+            "micromatch": "^4.0.2",
+            "node-forge": "^0.10.0",
+            "nullthrows": "^1.1.1",
+            "open": "^7.0.3"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1970,12 +2013,34 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "fast-glob": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2395,6 +2460,49 @@
         "chalk": "^4.1.0"
       },
       "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "@parcel/logger": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.0.0-beta.2.tgz",
+          "integrity": "sha512-YuTUGN47eMctdtTx0hhqKUCRCtuqqV+n6MRrm5sTlg/XpZP8ySUnq4+8VqMqslB761GgXmaDKtNIebe0lc+Erw==",
+          "dev": true,
+          "requires": {
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/events": "2.0.0-beta.2"
+          }
+        },
+        "@parcel/utils": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.0.0-beta.2.tgz",
+          "integrity": "sha512-v8vFGdUY/IuuL7dvmdNxhv4TowgqYDxupToxEvMix1GePRx7QTV1ugy/uWgMXhNIytFo4qyo1fWD7VcXLMS1TQ==",
+          "dev": true,
+          "requires": {
+            "@iarna/toml": "^2.2.0",
+            "@parcel/codeframe": "2.0.0-beta.2",
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/logger": "2.0.0-beta.2",
+            "@parcel/markdown-ansi": "2.0.0-beta.2",
+            "@parcel/source-map": "2.0.0-alpha.4.21",
+            "ansi-html": "^0.0.7",
+            "chalk": "^4.1.0",
+            "clone": "^2.1.1",
+            "fast-glob": "3.1.1",
+            "fastest-levenshtein": "^1.0.8",
+            "is-glob": "^4.0.0",
+            "is-url": "^1.2.2",
+            "json5": "^1.0.1",
+            "lru-cache": "^6.0.0",
+            "micromatch": "^4.0.2",
+            "node-forge": "^0.10.0",
+            "nullthrows": "^1.1.1",
+            "open": "^7.0.3"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2429,6 +2537,19 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "fast-glob": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2809,6 +2930,49 @@
         "term-size": "^2.2.1"
       },
       "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "@parcel/logger": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.0.0-beta.2.tgz",
+          "integrity": "sha512-YuTUGN47eMctdtTx0hhqKUCRCtuqqV+n6MRrm5sTlg/XpZP8ySUnq4+8VqMqslB761GgXmaDKtNIebe0lc+Erw==",
+          "dev": true,
+          "requires": {
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/events": "2.0.0-beta.2"
+          }
+        },
+        "@parcel/utils": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.0.0-beta.2.tgz",
+          "integrity": "sha512-v8vFGdUY/IuuL7dvmdNxhv4TowgqYDxupToxEvMix1GePRx7QTV1ugy/uWgMXhNIytFo4qyo1fWD7VcXLMS1TQ==",
+          "dev": true,
+          "requires": {
+            "@iarna/toml": "^2.2.0",
+            "@parcel/codeframe": "2.0.0-beta.2",
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/logger": "2.0.0-beta.2",
+            "@parcel/markdown-ansi": "2.0.0-beta.2",
+            "@parcel/source-map": "2.0.0-alpha.4.21",
+            "ansi-html": "^0.0.7",
+            "chalk": "^4.1.0",
+            "clone": "^2.1.1",
+            "fast-glob": "3.1.1",
+            "fastest-levenshtein": "^1.0.8",
+            "is-glob": "^4.0.0",
+            "is-url": "^1.2.2",
+            "json5": "^1.0.1",
+            "lru-cache": "^6.0.0",
+            "micromatch": "^4.0.2",
+            "node-forge": "^0.10.0",
+            "nullthrows": "^1.1.1",
+            "open": "^7.0.3"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2843,6 +3007,19 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "fast-glob": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3210,6 +3387,49 @@
         "open": "^7.0.3"
       },
       "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "@parcel/logger": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.0.0-beta.2.tgz",
+          "integrity": "sha512-YuTUGN47eMctdtTx0hhqKUCRCtuqqV+n6MRrm5sTlg/XpZP8ySUnq4+8VqMqslB761GgXmaDKtNIebe0lc+Erw==",
+          "dev": true,
+          "requires": {
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/events": "2.0.0-beta.2"
+          }
+        },
+        "@parcel/utils": {
+          "version": "2.0.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.0.0-beta.2.tgz",
+          "integrity": "sha512-v8vFGdUY/IuuL7dvmdNxhv4TowgqYDxupToxEvMix1GePRx7QTV1ugy/uWgMXhNIytFo4qyo1fWD7VcXLMS1TQ==",
+          "dev": true,
+          "requires": {
+            "@iarna/toml": "^2.2.0",
+            "@parcel/codeframe": "2.0.0-beta.2",
+            "@parcel/diagnostic": "2.0.0-beta.2",
+            "@parcel/logger": "2.0.0-beta.2",
+            "@parcel/markdown-ansi": "2.0.0-beta.2",
+            "@parcel/source-map": "2.0.0-alpha.4.21",
+            "ansi-html": "^0.0.7",
+            "chalk": "^4.1.0",
+            "clone": "^2.1.1",
+            "fast-glob": "3.1.1",
+            "fastest-levenshtein": "^1.0.8",
+            "is-glob": "^4.0.0",
+            "is-url": "^1.2.2",
+            "json5": "^1.0.1",
+            "lru-cache": "^6.0.0",
+            "micromatch": "^4.0.2",
+            "node-forge": "^0.10.0",
+            "nullthrows": "^1.1.1",
+            "open": "^7.0.3"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3244,6 +3464,28 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "domhandler": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "fast-glob": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5395,6 +5637,12 @@
       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
       "dev": true
     },
+    "content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
+      "dev": true
+    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -6532,6 +6780,12 @@
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true
     },
+    "envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true
+    },
     "enzyme": {
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
@@ -8774,6 +9028,19 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.5.tgz",
+      "integrity": "sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.18.0-next.2",
+        "foreach": "^2.0.5",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -13921,6 +14188,72 @@
         }
       }
     },
+    "postcss-modules": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-3.2.2.tgz",
+      "integrity": "sha512-JQ8IAqHELxC0N6tyCg2UF40pACY5oiL6UpiqqcIFRWqgDYO8B0jnxzoQ0EOpPrWXvcpu6BSbQU/3vSiq7w8Nhw==",
+      "dev": true,
+      "requires": {
+        "generic-names": "^2.0.1",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss": "^7.0.32",
+        "postcss-modules-extract-imports": "^2.0.0",
+        "postcss-modules-local-by-default": "^3.0.2",
+        "postcss-modules-scope": "^2.2.0",
+        "postcss-modules-values": "^3.0.0",
+        "string-hash": "^1.1.1"
+      },
+      "dependencies": {
+        "postcss-modules-extract-imports": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
+          "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
+          "dev": true,
+          "requires": {
+            "postcss": "^7.0.5"
+          }
+        },
+        "postcss-modules-local-by-default": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
+          "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^4.1.1",
+            "postcss": "^7.0.32",
+            "postcss-selector-parser": "^6.0.2",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
+          "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
+          "dev": true,
+          "requires": {
+            "postcss": "^7.0.6",
+            "postcss-selector-parser": "^6.0.0"
+          }
+        },
+        "postcss-modules-values": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
+          "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^4.0.0",
+            "postcss": "^7.0.6"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "dev": true
+        }
+      }
+    },
     "postcss-modules-extract-imports": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
@@ -17541,6 +17874,12 @@
       "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==",
       "dev": true
     },
+    "tty-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
+      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==",
+      "dev": true
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
diff --git a/src/component/StatusDonasi.jsx b/src/component/StatusDonasi.jsx
index 5cff3fbef267155afe40ac81d9f0e2ea63723824..589fa2ace5a4ce70022439670f99dd8ecdd939d8 100644
--- a/src/component/StatusDonasi.jsx
+++ b/src/component/StatusDonasi.jsx
@@ -2,9 +2,11 @@ import React from "react";
 import { css } from "@emotion/core";
 const StatusDonasi = ({ status, label }) => {
   let color;
+  let backgroundColor;
   switch (status) {
     case "001":
-      color = "#EAC435";
+      color = "#4E7890";
+      backgroundColor = "#FFC80A";
       break;
     case "002":
       color = "#27496d";
@@ -23,6 +25,7 @@ const StatusDonasi = ({ status, label }) => {
     <div
       css={css`
         color: ${color};
+        background-color: ${backgroundColor};
       `}
     >
       {label}
diff --git a/src/page/donasi-barang/DetailDonasiBarang.jsx b/src/page/donasi-barang/DetailDonasiBarang.jsx
index bf485aba720e8381239f2c8945c1a32ee6302afb..6b7983ce4b39c6b323bf50b9edff5cad2d916c8a 100644
--- a/src/page/donasi-barang/DetailDonasiBarang.jsx
+++ b/src/page/donasi-barang/DetailDonasiBarang.jsx
@@ -35,7 +35,7 @@ const DetailDonasiBarang = ({ idDonasi }) => {
         margin: 2rem 3rem 3rem 3rem;
         flex-direction: column;
         justify-content: space-around;
-        height: 75vh;
+        height: 60vh;
       `}
     >
       {error && <ErrorDiv>Something error</ErrorDiv>}
@@ -95,80 +95,181 @@ const DetailDonasiBarang = ({ idDonasi }) => {
           align-items: baseline;
         `}
       >
-        <div>Program: </div>
         <div
-          css={css`
-            margin-left: 0.5rem;
-          `}
-        >
-          {donation.program_name}
-        </div>
-      </div>
-      <div
-        css={css`
-          display: flex;
-          font-size: 1.2rem;
-          align-items: baseline;
-        `}
-      >
-        <div>Jenis Barang: </div>
-        <div
-          css={css`
-            margin-left: 0.5rem;
-          `}
-        >
-          {donation.goods_description}
-        </div>
-      </div>
-      <div
-        css={css`
-          display: flex;
-          font-size: 1.2rem;
-          align-items: baseline;
-        `}
-      >
-        <div>Jumlah Barang: </div>
-        <div
-          css={css`
-            margin-left: 0.5rem;
-          `}
-        >
-          {donation.goods_quantity}
-        </div>
-      </div>
-      <div
-        css={css`
-          display: flex;
-          flex-direction: column;
-        `}
-      >
-        {" "}
-        <div
-          css={css`
+          css={css`display: flex; justify-content: center; min-width:100%;`}><div className="detail-donasi-barang"
+            css={css`
+              background-color: #F2F2F2;
+              border-radius: 15px;
+              width: 650px;
+              padding: 0.5rem 1rem 0.5rem 1rem;
+              margin: 1rem 0 1rem 0;
+          `}>
+            <div
+              css={css`
+              font-style: normal;
+              font-weight: bold;
+              font-size: 25px;
+              text-align: center;
+              color: #4E7890;
+            `}>
+              DONASI BARANG</div>
+            <div
+              css={css`
+              font-style: normal;
+              font-weight: 500;
+              font-size: 20px;
+              text-align: center;
+              color: #7D7D7D;
+            `}>
+              Kode: {donation.donation_number}
+            </div>
+            <div
+              css={css`
+              font-style: normal;
+              font-weight: bold;
+              font-size: 20px;
+              line-height: 28px;
+              border-bottom: 1px solid #C4C4C4;
+              text-align: center;
+              display: flex; justify-content: center;font-size: 1.3rem;
+            `}>
+              <div css={css`color: #4E7890; padding-right:6px;`}>
+                Status:
+              </div>
+              {donation.donation_status !== "002" ? (
+                <div css={css`
+                color: #E7C340;
+                `}>
+                  Dalam Proses
+                </div>
+              ) : 
+                <div css={css`
+                  color: #4E7890;
+                  `}>
+                Donasi diterima
+                </div>}
+            </div>
+
+            <div
+              data-testid="detail-donasi-barang-test"
+              className="donasi-barang"
+              css={css`
+            font-style: normal;
+            font-weight: 300;
+            font-size: 18px;
+            padding: 1rem;
+          `}>
+
+              <div className="row" >
+
+                <div className="col-3" css={css`display: flex; align-items: center;`}>
+                  <div
+                    css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    padding-bottom: 10px;
+                    font-size: 18px;
+                  `}
+                  >
+                    Program:
+                </div>
+                </div>
+
+                <div className="col-9"
+                  css={css` 
+                font-style: normal;
+                font-weight: normal;
+                text-align: right;
+                padding-right: 3rem;
+                `}>
+                  {donation.program_name}
+                </div>
+              </div>
+
+              <div className="row" >
+
+                <div className="col-3" css={css`display: flex; `}>
+                  <div
+                    css={css`
+                  display: inline;
+                  margin-left: 1rem;
+                  font-style: normal;
+                  font-weight: normal;
+                  font-size: 18px;
+                  padding-bottom: 10px;
+                `}
+                  >
+                    Jenis Barang:
+              </div></div>
+                <div className="col-9"
+                  css={css`
+                font-style: normal;
+                font-weight: normal;
+                text-align: right;
+                padding-right: 3rem;`}>
+                  {donation.goods_description}
+                </div>
+              </div>
+
+              <div className="row" >
+
+                <div className="col-3" css={css`display: flex; `}>
+                  <div
+                    css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    min-width:100%;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                    padding-bottom: 10px;
+                  `}
+                  >
+                    Jumlah Barang:
+                </div>
+                </div>
+                <div className="col-9"
+                  css={css`
+                font-style: normal;
+                font-weight: normal;
+                text-align: right;
+                padding-right: 3rem;`}>
+                  {donation.goods_quantity}
+                </div>
+              </div>
+
+              <div
+                css={css`
             font-size: 1.3rem;
+            text-align: center;
+            padding-bottom: 10px;
           `}
-        >
-          <div>
-            {donation.delivery_address === null ? (
-              <div>Diantar ke Masjid Al-Jabar</div>
-            ) : (
-            <div>Dijemput di {donation.delivery_address}</div>
-            )}
+              >
+                <div>
+                  {donation.delivery_address === null ? (
+                    <div>Diantar ke Masjid Al-Jabar</div>
+                  ) : (
+                    <div>Dijemput di {donation.delivery_address}</div>
+                  )}
+                </div>
+              </div>
+              <div css={css`display: flex; justify-content: center; min-width:100%;`}>{donation.donation_status !== "002" ? (
+                <FormDonasiBarang
+                  {...{
+                    idDonasi,
+                    defaultStatus: donation.donation_status,
+                  }}
+                />
+              ) : <div css={css`
+                  font-size: 1.3rem;
+                  `}></div>}
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      {donation.donation_status !== "002" ? (
-            <FormDonasiBarang
-              {...{
-                idDonasi,
-                defaultStatus: donation.donation_status,
-              }}
-            />
-          ) : <div css={css`
-                  font-size: 1.3rem;
-                  `}>
-                    Donasi sudah diterima
-              </div>}
     </div>
   );
 };
diff --git a/src/page/donasi/DetailDonasiUang.jsx b/src/page/donasi/DetailDonasiUang.jsx
index d30267c5aa2d50d1b39725cef749d57ddae1e838..fa3ef52f4589a7fd0754381b81464c836172376e 100644
--- a/src/page/donasi/DetailDonasiUang.jsx
+++ b/src/page/donasi/DetailDonasiUang.jsx
@@ -55,6 +55,7 @@ const DetailDonasiUang = ({ idDonasi }) => {
         flex-direction: column;
         justify-content: space-around;
         height: 75vh;
+        padding-top: 100px;
       `}
     >
       {error && <ErrorDiv>Something error</ErrorDiv>}
@@ -92,77 +93,6 @@ const DetailDonasiUang = ({ idDonasi }) => {
           align-content: space-between;
         `}
       >
-        <div
-          css={css`
-            display: flex;
-          `}
-        >
-          <div
-            css={css`
-              margin-right: 1rem;
-            `}
-          >
-            Kode Donasi:
-          </div>
-          <div>{donation.donation_number}</div>
-        </div>
-        {donation.donation_status !== "002" &&
-          donation.donation_status !== "003" && (
-            <FormDonasi
-              {...{
-                idDonasi,
-                defaultStatus: donation.donation_status,
-              }}
-            />
-          )}
-      </div>
-      <div
-        css={css`
-          font-size: 1.5rem;
-          display: flex;
-        `}
-      >
-        <div
-          css={css`
-            margin-right: 1rem;
-          `}
-        >
-          Status:{" "}
-        </div>
-        <StatusDonasi
-          label={donation.readable_donation_status}
-          status={donation.donation_status}
-        />
-      </div>
-      <div
-        css={css`
-          font-size: 1.2rem;
-          display: flex;
-        `}
-      >
-        <div
-          css={css`
-            margin-right: 0.5rem;
-          `}
-        >
-          Tanggal dibuat:{" "}
-        </div>
-        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.created_at} />}</div>
-      </div>
-      <div
-        css={css`
-          font-size: 1.2rem;
-          display: flex;
-        `}
-      >
-        <div
-          css={css`
-            margin-right: 0.5rem;
-          `}
-        >
-          Tanggal Update:{" "}
-        </div>
-        <div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.updated_at} />}</div>
       </div>
       <div
         css={css`
@@ -186,146 +116,292 @@ const DetailDonasiUang = ({ idDonasi }) => {
         <PhoneIcon style={{ color: "FFC80A" }} />
         <div>{donation.user_phone_number}</div>
       </div>
+
+
       <div
-        css={css`
-          display: flex;
-          font-size: 1.2rem;
-          align-items: baseline;
-        `}
-      >
-        <div>Program: </div>
-        <div
-          css={css`
-            margin-left: 0.5rem;
-          `}
-        >
-          {donation.program_name}
-        </div>
-      </div>
-      <div
-        css={css`
-          display: flex;
-          font-size: 1.2rem;
-          align-items: baseline;
-        `}
-      >
-        <div>Jumlah Donasi: </div>
-        <div
-          css={css`
-            margin-left: 0.5rem;
-          `}
-        >
-          {stringToCurrency(donation.amount)}
-        </div>
-      </div>
-      <div
-        css={css`
-          display: flex;
-          flex-direction: column;
-        `}
-      >
-        {" "}
-        <div
+        css={css`display: flex; justify-content: center; min-width:100%;`}><div className="detail-donasi-barang"
           css={css`
-            font-size: 1.3rem;
+              background-color: #F2F2F2;
+              border-radius: 15px;
+              width: 650px;
+              padding: 0.5rem 1rem 0.5rem 1rem;
+              margin: 1rem 0 1rem 0;
+          `}>
+          <div
+            css={css`
+              font-style: normal;
+              font-weight: bold;
+              font-size: 25px;
+              text-align: center;
+              color: #4E7890;
+            `}>
+            DONASI UANG</div>
+          <div
+            css={css`
+              font-style: normal;
+              font-weight: 500;
+              font-size: 20px;
+              text-align: center;
+              color: #7D7D7D;
+            `}>
+            Kode: {donation.donation_number}
+          </div>
+          <div
+            css={css`
+              font-style: normal;
+              font-weight: bold;
+              font-size: 20px;
+              line-height: 28px;
+              border-bottom: 1px solid #C4C4C4;
+              text-align: center;
+              color: #4E7890;
+            `}>
+              <div css={css`display: flex; justify-content: center;`}>
+            <div
+              css={css`
+            padding-right:6px;
           `}
-        >
-          <div>
-            {donation.proof_of_bank_transfer === null ? (
-              <div>User belum mengirimkan bukti transfer</div>
-            ) : (
-              <div
-                css={css`
-                  display: flex;
-                  flex-direction: column;
-                `}
-              >
+            >
+              Status: {" "}
+            </div>
+            <StatusDonasi
+              label={donation.readable_donation_status}
+              status={donation.donation_status}
+            />
+            </div>
+          </div>
+
+          <div
+            data-testid="detail-donasi-barang-test"
+            className="donasi-barang"
+            css={css`
+            font-style: normal;
+            font-weight: 300;
+            font-size: 18px;
+            padding: 1rem;
+          `}>
+
+            <div className="row" >
+
+              <div className="col-3" css={css`display: flex; align-items: center;`}>
                 <div
                   css={css`
-                    display: flex;
-                    font-size: 1.2rem;
-                    align-items: baseline;
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    padding-bottom: 10px;
+                    font-size: 18px;
                   `}
                 >
-                  <div
-                    css={css`
-                      margin-right: 1rem;
-                    `}
-                  >
-                    Nama Pengirim:
-                  </div>
-                  <div>{donation.user_bank_account_name}</div>
+                  Program:
                 </div>
+              </div>
+
+              <div className="col-9"
+                css={css` 
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 10rem;
+                `}>
+                {donation.program_name}
+              </div>
+            </div>
+
+            <div className="row" >
+
+              <div className="col-3" css={css`display: flex; `}>
                 <div
                   css={css`
-                    display: flex;
-                    font-size: 1.2rem;
-                    align-items: baseline;
-                  `}
+                  display: inline;
+                  margin-left: 1rem;
+                  min-width:150%;
+                  font-style: normal;
+                  font-weight: normal;
+                  font-size: 18px;
+                  padding-bottom: 10px;
+                `}
                 >
-                  <div
-                    css={css`
-                      margin-right: 1rem;
-                    `}
-                  >
-                    Nama Bank Pengirim:
-                  </div>
-                  <div>{donation.user_bank_name}</div>
-                </div>
+                  Jumlah Donasi:
+              </div></div>
+              <div className="col-9"
+                css={css`
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 10rem;`}>
+                {stringToCurrency(donation.amount)}
+              </div>
+            </div>
+
+            <div className="row" >
+
+              <div className="col-3" css={css`display: flex; `}>
                 <div
                   css={css`
-                    display: flex;
-                    font-size: 1.2rem;
-                    align-items: baseline;
+                    display: inline;
+                    margin-left: 1rem;
+                    min-width:150%;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                    padding-bottom: 10px;
                   `}
                 >
-                  <div
-                    css={css`
-                      margin-right: 1rem;
-                    `}
-                  >
-                    Nama Bank dan Pemilik Rekening Tujuan:
-                  </div>
-                  <div>
-                    {donation.transfer_destination_bank_name} -{" "}
-                    {donation.transfer_destination_bank_account_name}
-                  </div>
+                  Tanggal Dibuat:
                 </div>
+              </div>
+              <div className="col-9"
+                css={css`
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 10rem;`}>
+                {<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.created_at} />}
+              </div>
+            </div>
+
+            <div className="row" css={css`line-height: 28px; border-bottom: 1px solid #C4C4C4;`}>
+              <div className="col-3" css={css`display: flex; `}>
                 <div
                   css={css`
-                    display: flex;
-                    font-size: 1.2rem;
-                    align-items: baseline;
+                    display: inline;
+                    margin-left: 1rem;
+                    min-width:150%;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                    padding-bottom: 10px;
                   `}
                 >
-                  <div
-                    css={css`
-                      margin-right: 1rem;
-                    `}
-                  >
-                    Nomor Rekening Tujuan:
-                  </div>
-                  <div>{donation.transfer_destination_bank_account_number}</div>
+                  Tanggal Update:
                 </div>
-                <div
-                  css={css`
-                    margin-top: 1rem;
-                  `}
-                >
-                  {" "}
+              </div>
+              <div className="col-9"
+                css={css`
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 10rem;`}>
+                {<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.updated_at} />}
+              </div>
+            </div>
+
+            <div
+              css={css`
+          display: flex;
+          flex-direction: column;
+              `}
+            >
+              {" "}
+              <div
+                css={css`
+            font-size: 1.3rem;
+              `}
+              >
+                <div>
+                  {donation.proof_of_bank_transfer === null ? (
+                    <div css={css`
+                    font-style: normal;
+                    font-weight: normal;
+                    text-align: center;
+                    padding-top: 10px;
+                    padding-bottom: 10px;`}>
+                      User belum mengirimkan bukti transfer</div>
+                  ) : (
+                      <div
+                        css={css`
+                          display: flex;
+                          flex-direction: column;
+                        `}
+                      >
+                        <div className="row" css={css`padding-top: 10px; padding-bottom: 10px; line-height: 28px; border-bottom: 1px solid #C4C4C4;`}>
+
+                        <div className="col-3" css={css`display: flex; `}>
+                          <div
+                            css={css`
+                              display: inline;
+                              margin-left: 1rem;
+                              min-width:150%;
+                              font-style: normal;
+                              font-weight: normal;
+                              font-size: 18px;
+                              padding-bottom: 10px;
+                            `}
+                          >
+                            Rekening Pengirim:
+                          </div>
+                        </div>
+                          <div className="col-9" 
+                            css={css`display: flex; flex-direction:column;
+                            font-style: normal;
+                            font-weight: normal;
+                            padding-left: 10rem;`}>
+                            {donation.user_bank_name}
+                            <br></br>
+                            {donation.user_bank_account_name}
+                          </div>
+                      </div>
+                      <div className="row" css={css`display: flex; padding-top: 10px; padding-bottom: 10px;`}>
+
+                        <div className="col-3" css={css`display: flex; `}>
+                          <div
+                            css={css`
+                              display: inline;
+                              margin-left: 1rem;
+                              min-width:150%;
+                              font-style: normal;
+                              font-weight: normal;
+                              font-size: 18px;
+                              padding-bottom: 10px;
+                            `}
+                          >
+                            Rekening Penerima:
+                          </div>
+                        </div>
+                          <div className="col-9"
+                            css={css`display: flex; flex-direction:column;
+                            font-style: normal;
+                            font-weight: normal; 
+                            padding-left: 10rem;`}>
+                            {donation.transfer_destination_bank_name}
+                            <br></br>
+                            {donation.transfer_destination_bank_account_name}
+                          </div>
+                      </div>
+                      <div 
+                      css={
+                        css`
+                        display: flex; 
+                        justify-content: flex-end;
+                        padding-bottom: 2rem`}>
+                      <Button
+                          css={css`width: 200px;`}
+                          onClick={handleClickOpen}
+                          variant="contained"
+                          color="primary"
+                          size="medium"
+                          startIcon={<PhotoIcon />}
+                          data-testid="button-see-proof"
+                        >
+                          Bukti
+                        </Button></div>
+                    </div>
+                  )}
                 </div>
-                <Button
-                  onClick={handleClickOpen}
-                  variant="contained"
-                  color="primary"
-                  size="medium"
-                  startIcon={<PhotoIcon />}
-                  data-testid="button-see-proof"
-                >
-                  Bukti
-                </Button>
               </div>
-            )}
+            </div>
+            <div css={
+              css`
+              display: flex; 
+              justify-content: center;`}>
+            {donation.donation_status !== "002" &&
+              donation.donation_status !== "003" && (
+                <FormDonasi
+                  {...{
+                    idDonasi,
+                    defaultStatus: donation.donation_status,
+                  }}
+                />
+              )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/page/produk/FormProduk.jsx b/src/page/produk/FormProduk.jsx
index cacd5f7d805b10529f65358858d5b15cd666dfa8..9e58b4a4134eb8c0a25703c5f1393806a96dcc4d 100644
--- a/src/page/produk/FormProduk.jsx
+++ b/src/page/produk/FormProduk.jsx
@@ -374,7 +374,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
           data-testid="hampers-price-input"
           type="number"
           name="hampers_price"
-          defaultValue="0" // ganti klo be udah selesai jadi 0
+          defaultValue="0"
           disabled = {!isHampers}
           ref={register}
         />