Create Kas Submission Page

example.env

@@ -1 +1 @@
-VITE_BACKEND_URL=https://backend.url
+VITE_BACKEND_URL=https://api.fanesp.online

package.json

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
+    "@hookform/resolvers": "^3.9.0",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/x-charts": "^7.5.0",
@@ -25,9 +26,13 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.3.5",
+    "react-hook-form": "^7.52.2",
     "react-loading-skeleton": "^3.4.0",
     "react-router-dom": "^6.23.1",
-    "tailwind-merge": "^2.3.0"
+    "react-simple-image-viewer": "^1.2.2",
+    "tailwind-merge": "^2.3.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.4",

src/api/services/balance.ts → src/api/balance/balance.ts

@@ -1,18 +1,14 @@
 import { APIResponse } from "@types";
+import { BalanceModel } from "./model";
 import API from "..";
 
-type GetResponse = {
-  balance: number;
-  updated_at: string;
-};
-
 export default class BalanceServices {
   basePath: string = "/balance";
   private api: API = new API();
 
   async get() {
     const targetPath = this.basePath;
-    const res: APIResponse<GetResponse> = await this.api.GET(targetPath);
+    const res: APIResponse<BalanceModel> = await this.api.GET(targetPath);
     return res;
   }
 }

src/api/balance/model.ts

@@ -0,0 +1,4 @@
+export type BalanceModel = {
+  balance: number;
+  updated_at: string;
+};

src/api/balanceHistory/balanceHistory.ts

@@ -0,0 +1,15 @@
+import { APIResponse } from "@types";
+import API from "..";
+import { BalanceHistoryModel } from "./model";
+
+export default class BalanceHistoryServices {
+  basePath: string = "/balance/history";
+  private api: API = new API();
+
+  async get(queryParams?: string) {
+    const targetPath = `${this.basePath}?${queryParams}`;
+    const res: APIResponse<BalanceHistoryModel[]> =
+      await this.api.GET(targetPath);
+    return res;
+  }
+}

src/api/balanceHistory/model.ts

@@ -0,0 +1,18 @@
+import { PaginationType } from "@types";
+
+export type BalanceHistoryModel = {
+  amount: number;
+  prev_balance: number;
+  activity: string;
+  note: string;
+  user: {
+    npm: string;
+    name: string;
+  };
+  created_at: string;
+};
+
+export type BalanceHistoryResponseModel = {
+  data: BalanceHistoryModel[];
+  pagination?: PaginationType;
+};

src/api/file/file.ts

@@ -0,0 +1,35 @@
+import API from "..";
+import { UploadModel } from "./model";
+import { FetchCallback } from "@types";
+
+export default class FileServices {
+  basePath: string = "/file/images";
+  private api: API = new API();
+
+  async post(submission: FormData, callback: FetchCallback<UploadModel>) {
+    const targetPath = `${this.basePath}`;
+    const res = await this.api.POSTFORM<UploadModel>(targetPath, submission);
+
+    if (!res?.status) {
+      callback.onError(res?.message || "unknown error");
+    } else {
+      if (res.data) callback.onSuccess(res.data);
+    }
+
+    callback.onFullfilled && callback.onFullfilled();
+  }
+
+  async delete(urlId: string, callback: FetchCallback<UploadModel>) {
+    const targetPath = `${this.basePath}/${urlId}`;
+
+    const res = await this.api.DELETE<UploadModel>(targetPath);
+
+    if (!res?.status) {
+      callback.onError(res?.message || "unknown error");
+    } else {
+      if (res.data) callback.onSuccess(res?.data);
+    }
+
+    callback.onFullfilled && callback.onFullfilled();
+  }
+}

src/api/file/model.ts

@@ -0,0 +1,3 @@
+export type UploadModel = {
+  url_id: string;
+};