Fakultas Ilmu Komputer UI

Commit a9496ed8 authored by Shella Gabriella's avatar Shella Gabriella
Browse files

PBI-11: Mengimplementasi UI donasi uang & barang yang baru

parent dd4a256a
......@@ -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",
......
......@@ -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}
......
......@@ -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;