diff --git a/app/package.json b/app/package.json
index 8e4719c..560278f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,19 +30,23 @@
"@react-three/drei": "^9.121.3",
"@react-three/fiber": "^8.17.12",
"@types/three": "^0.172.0",
+ "axios": "^1.7.9",
"dayjs": "^1.11.13",
"graphql": "^16.10.0",
"history": "^5.3.0",
"js-cookie": "^3.0.5",
"jsonwebtoken": "^9.0.2",
"libphonenumber-js": "^1.11.17",
+ "lottie-colorify": "^0.8.0",
"material-react-table": "^3.1.0",
"polished": "^4.3.1",
"react": "^18.3.1",
"react-auth-kit": "^3.1.3",
"react-dom": "^18.3.1",
+ "react-dropzone": "^14.3.5",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.54.2",
+ "react-image-file-resizer": "^0.4.8",
"react-router": "^7.1.3",
"react-router-dom": "^7.1.3",
"react-spring": "^9.7.5",
diff --git a/app/src/assets/lottie/upload.json b/app/src/assets/lottie/upload.json
new file mode 100644
index 0000000..858c036
--- /dev/null
+++ b/app/src/assets/lottie/upload.json
@@ -0,0 +1,820 @@
+{
+ "v": "5.5.7",
+ "meta": { "g": "LottieFiles AE 0.1.21", "a": "", "k": "", "d": "", "tc": "" },
+ "fr": 24,
+ "ip": 0,
+ "op": 47,
+ "w": 512,
+ "h": 512,
+ "nm": "Upload arrow",
+ "ddd": 0,
+ "assets": [],
+ "layers": [
+ {
+ "ddd": 0,
+ "ind": 1,
+ "ty": 4,
+ "nm": "arrow",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 180, "ix": 10 },
+ "p": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 0,
+ "s": [256, 283.185, 0],
+ "to": [0, 0, 0],
+ "ti": [0, 0, 0]
+ },
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 23,
+ "s": [256, 253.185, 0],
+ "to": [0, 0, 0],
+ "ti": [0, 0, 0]
+ },
+ { "t": 46, "s": [256, 283.185, 0] }
+ ],
+ "ix": 2
+ },
+ "a": { "a": 0, "k": [51.129, 53.901, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [6.231, -6.23],
+ [0, 0],
+ [3.863, 3.863],
+ [0, 0],
+ [-8.812, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [-3.864, 3.863],
+ [0, 0],
+ [-6.231, -6.23],
+ [0, 0],
+ [8.812, 0]
+ ],
+ "v": [
+ [44.649, -12.317],
+ [6.994, 25.339],
+ [-6.995, 25.339],
+ [-44.648, -12.317],
+ [-37.655, -29.202],
+ [37.654, -29.202]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [51.129, 78.351], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ },
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [5.463, 0],
+ [0, 0],
+ [0, 5.463],
+ [0, 0],
+ [-5.463, 0],
+ [0, 0],
+ [0, -5.462],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [-5.463, 0],
+ [0, 0],
+ [0, -5.462],
+ [0, 0],
+ [5.463, 0],
+ [0, 0],
+ [0, 5.463]
+ ],
+ "v": [
+ [15.928, 38.809],
+ [-15.928, 38.809],
+ [-25.82, 28.917],
+ [-25.82, -28.918],
+ [-15.928, -38.809],
+ [15.928, -38.809],
+ [25.82, -28.918],
+ [25.82, 28.917]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [51.13, 39.059], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 2",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 2,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 2,
+ "ty": 4,
+ "nm": "circle 5",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [416.348, 370.204, 0], "ix": 2 },
+ "a": { "a": 0, "k": [41.622, 82.994, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 0,
+ "s": [100, 100, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 20,
+ "s": [120, 120, 100]
+ },
+ { "t": 40, "s": [100, 100, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, -22.849],
+ [22.85, 0],
+ [0, 22.85],
+ [-22.849, 0]
+ ],
+ "o": [
+ [0, 22.85],
+ [-22.849, 0],
+ [0, -22.849],
+ [22.85, 0]
+ ],
+ "v": [
+ [41.372, 0],
+ [0, 41.372],
+ [-41.372, 0],
+ [0, -41.372]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [41.622, 41.622], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 3,
+ "ty": 4,
+ "nm": "circle 4",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [374.976, 321.937, 0], "ix": 2 },
+ "a": { "a": 0, "k": [48.517, 96.785, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 2,
+ "s": [100, 100, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 22,
+ "s": [120, 120, 100]
+ },
+ { "t": 42, "s": [100, 100, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, -26.658],
+ [26.658, 0],
+ [0, 26.657],
+ [-26.657, 0]
+ ],
+ "o": [
+ [0, 26.657],
+ [-26.657, 0],
+ [0, -26.658],
+ [26.658, 0]
+ ],
+ "v": [
+ [48.268, 0.001],
+ [-0.001, 48.268],
+ [-48.268, 0.001],
+ [-0.001, -48.268]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [48.518, 48.518], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 4,
+ "ty": 4,
+ "nm": "circle 3",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [266, 334.871, 0], "ix": 2 },
+ "a": { "a": 0, "k": [96.785, 193.32, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 4,
+ "s": [95, 95, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 24,
+ "s": [100, 100, 100]
+ },
+ { "t": 44, "s": [95, 95, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, -53.315],
+ [53.314, 0],
+ [0, 53.315],
+ [-53.315, 0]
+ ],
+ "o": [
+ [0, 53.315],
+ [-53.315, 0],
+ [0, -53.315],
+ [53.314, 0]
+ ],
+ "v": [
+ [96.535, 0],
+ [0, 96.535],
+ [-96.535, 0],
+ [0, -96.535]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [96.785, 96.785], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 5,
+ "ty": 4,
+ "nm": "circle 2",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [157.829, 352.623, 0], "ix": 2 },
+ "a": { "a": 0, "k": [69.203, 138.157, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 6,
+ "s": [100, 100, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 26,
+ "s": [110, 110, 100]
+ },
+ { "t": 46, "s": [100, 100, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, -38.083],
+ [38.082, 0],
+ [0, 38.081],
+ [-38.082, 0]
+ ],
+ "o": [
+ [0, 38.081],
+ [-38.082, 0],
+ [0, -38.083],
+ [38.082, 0]
+ ],
+ "v": [
+ [68.954, 0.001],
+ [-0.001, 68.954],
+ [-68.954, 0.001],
+ [-0.001, -68.954]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [69.203, 69.204], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 6,
+ "ty": 4,
+ "nm": "circle 1",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [95.652, 370.204, 0], "ix": 2 },
+ "a": { "a": 0, "k": [41.622, 82.994, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 0,
+ "s": [100, 100, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 20,
+ "s": [120, 120, 100]
+ },
+ { "t": 40, "s": [100, 100, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, -22.849],
+ [22.849, 0],
+ [0, 22.85],
+ [-22.849, 0]
+ ],
+ "o": [
+ [0, 22.85],
+ [-22.849, 0],
+ [0, -22.849],
+ [22.849, 0]
+ ],
+ "v": [
+ [41.372, 0],
+ [0, 41.372],
+ [-41.372, 0],
+ [0, -41.372]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [41.622, 41.622], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 7,
+ "ty": 4,
+ "nm": "rectangle",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [254.141, 328.832, 0], "ix": 2 },
+ "a": { "a": 0, "k": [158.739, 41.622, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [0, 0],
+ [0, 0],
+ [0, 0]
+ ],
+ "v": [
+ [158.489, -41.372],
+ [-158.489, -41.372],
+ [-158.489, 41.372],
+ [158.489, 41.372]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [0.596000043084, 0.842999985639, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [158.739, 41.622], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 120,
+ "st": 0,
+ "bm": 0
+ }
+ ],
+ "markers": []
+}
diff --git a/app/src/core/components/FileList.tsx b/app/src/core/components/FileList.tsx
new file mode 100644
index 0000000..1197c0f
--- /dev/null
+++ b/app/src/core/components/FileList.tsx
@@ -0,0 +1,105 @@
+import { InsertDriveFile } from '@mui/icons-material';
+import { Box, LinearProgress, List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import styled from 'styled-components';
+
+const FileListContainer = styled(List)`
+ width: 100%;
+ margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const FileListItem = styled(ListItem)`
+ display: flex;
+ border: 1px solid ${({ theme }) => theme.palette.divider};
+ border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+ margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const FileListImage = styled.img`
+ width: ${({ theme }) => theme.sizing(5)};
+ height: ${({ theme }) => theme.sizing(5)};
+ object-fit: cover;
+ margin-right: ${({ theme }) => theme.spacing(2)};
+ border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+`;
+
+const FileListItemTextBox = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+`;
+
+const FileListIcon = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: ${({ theme }) => theme.sizing(5)};
+ height: ${({ theme }) => theme.sizing(5)};
+ margin-right: ${({ theme }) => theme.spacing(2)};
+ border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+`;
+
+const FileListItemTitle = styled(Typography)`
+ max-width: 80%;
+`;
+
+const ProgressContainer = styled.div`
+ margin-right: ${({ theme }) => theme.spacing(1)};
+ width: 100%;
+`;
+
+export interface FileWithProgress {
+ error?: boolean;
+ file: File;
+ progress: number;
+}
+
+interface FileListProps {
+ files: FileWithProgress[];
+}
+
+function FileList({ files }: FileListProps) {
+ return (
+
+ {files.map(({ error, file, progress }) => (
+
+
+ {file.type.startsWith('image/') ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+ {file.name}
+
+
+ {`${(file.size / 1024 / 1024).toFixed(2)} MB`}
+
+ }
+ secondary={
+
+
+
+
+
+ {`${Math.round(progress)}%`}
+
+
+ }
+ />
+
+ ))}
+
+ );
+}
+
+export default FileList;
diff --git a/app/src/core/components/FileSelect.tsx b/app/src/core/components/FileSelect.tsx
new file mode 100644
index 0000000..5ead9ab
--- /dev/null
+++ b/app/src/core/components/FileSelect.tsx
@@ -0,0 +1,78 @@
+import { Box } from '@mui/material';
+import { ReactNode, useEffect, useState } from 'react';
+import { Accept, useDropzone } from 'react-dropzone';
+import Lottie from 'react-lottie-player';
+import styled from 'styled-components';
+import { replaceColor } from 'lottie-colorify';
+import useToast from '~/core/hooks/useToast';
+import { useTheme } from '@mui/material/styles';
+
+const UploadContainer = styled.div<{ $accept: boolean; $error: boolean; $reject: boolean }>`
+ width: 100%;
+ background: ${({ theme }) => (theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[200])};
+ border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+ border: 2px dashed ${({ theme }) => (theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[300])};
+ box-sizing: border-box;
+ color: inherit;
+ padding: ${({ theme }) => theme.spacing(4)};
+ padding-top: 0;
+ ${({ $accept, $error, $reject, theme }) => {
+ if ($accept) {
+ return `background: ${theme.palette.grey[800]}; color: ${theme.palette.common.white};`;
+ }
+ if ($reject || $error) {
+ return `border-color: ${theme.palette.error.main};`;
+ }
+ }};
+`;
+
+interface FileSelectProps {
+ children?: ReactNode;
+ error: boolean;
+ id: string;
+ onChange: (files: T[]) => void;
+ value?: File;
+ accept?: Accept;
+}
+
+function FileSelect({ children, error, id, onChange, accept }: FileSelectProps) {
+ const { toast } = useToast();
+ const theme = useTheme();
+
+ const { getInputProps, getRootProps, isDragAccept, isDragReject } = useDropzone({
+ accept: accept,
+ onDropAccepted(files) {
+ onChange(files as unknown as T[]);
+ },
+ onDropRejected: () => toast.error('Invalid File Type'),
+ });
+
+ const [animationData, setAnimationData] = useState