Create Kas Submission Page #16

jeflijonathan2327240094 · 2024-08-01T06:24:52Z

add submission page
add submission context and custom hook in submission page
add the uploaded image to the proof of payment upload form and a good file upload system
quick note to speed up note filling
add global component dialog and custom hook dialog.
the add global component button and the addition of the image downloader utils
user search dialog to search for users registered with admin and fill in the fields, you can use npm and the registered name.
add handle every error possibility
new package:
notistack are used to provide error, warning, and success notifications.
ui:

fanesz · 2024-08-01T06:32:12Z

@jeflijonathan2327240094 git pull origin development trus fix conflict

fanesz

Untuk sementara ini dulu, baru aku review dari segi penulisan kode, untuk UI dan fungsionalitas itu nanti.

Rombak folder structure, samain polanya kayak yg admin - financial request.
jadi harusnya pages/KasSubmission, baru didalemnya ada context, hooks, partials.
trus karena ada fitur spesifik, bikin folder List yg isinya komponen dan hooks untuk nampilin list. Trus folder Create. intinya pahamin dan ikutin aja pattern yg procom-admin

kalo ada pertanyaan/bingung/kendala/error, feel free pm aku

fanesz · 2024-08-01T14:58:33Z

package.json

    "react-loading-skeleton": "^3.4.0",
    "react-router-dom": "^6.23.1",
+    "sweetalert2": "^11.12.3",
+    "sweetalert2-react-content": "^5.0.7",


buang 2 package ini kalo cuma untuk error notifikasi, pake snackbar yg sudah di develop disini

fanesz · 2024-08-01T15:01:21Z

src/api/index.ts

-    Accept: "application/json",
-    "Content-type": "application/json",
-  };
+  headers: Headers;


konsep headers ini di rombak lagi, untuk default headers, ttp pake application/json,
trus bikin 1 method baru, POSTFORM (referensi), nah method ini ngeassign manual headers dengan tipe multipart/form-data, dll.

fanesz · 2024-08-01T15:01:36Z

src/api/index.ts

    } catch (err: AxiosError | any) {
      if (isAxiosError(err)) {
-        return err?.response?.data;
+        console.error("Axios error:", err.message);


buang console log dan commend di file ini

fanesz · 2024-08-01T15:03:37Z

src/api/services/CreateKas.ts

+  evidence: string;
+};
+
+export default class CreateKasService {


cek lagi naming patternnya, harusnya ini KasSubmissionService, file pagesnya juga jangan spesifik di CreateKas, cek lagi di admin repo yang financial request, disitu ada folder FinancialRequest/Create, disitu baru taro logic dan component untuk create

fanesz · 2024-08-01T15:04:20Z

src/api/services/CreateKas.ts

+  userPath: string = "/users";
+  private api: API = new API();
+  private apiForm: API = new API({ isForm: true });
+  async post(


tolong newline spacing di perhatiin, cek lagi yg admin, dimana mana harus pake breakpoint newline

fanesz · 2024-08-01T15:23:40Z

src/pages/CreateKas/partials/DialogUsers.tsx

+        {loading ? (
+          <div>Loading...</div>
+        ) : (


loading ini harusnya di parent kayak gini.
jadi nampilin loading dialog dulu, baru nampilin actual dialog with data

fanesz · 2024-08-01T15:25:07Z

src/api/services/UploadImage.ts

+export type UploadImageRequest = {
+  file: File;
+};
+export default class UploadImage {


perhatiin namanya, harusnya FileService

fanesz · 2024-08-01T15:26:38Z

src/pages/CreateKas/partials/QuickNote.tsx

+import { useRef, useEffect } from "react";
+import { useCreateKasContext } from "@pages/CreateKas/context/index";
+import glassmorphism from "@utils/glassmorphism";
+const QuickNote = () => {


note ini untuk apa? kok banyak event listener gini

fanesz · 2024-08-01T15:27:31Z

src/pages/CreateKas/partials/KasBody.tsx

+import UploadImage from "./UploadImage";
+import useCreateKasSubmission from "../hooks/useCreateKasSubmission";
+import SearchUser from "./SearchUser";
+const KasBody: React.FC = () => {


untuk seluruh file, perhatiin newline break, setelah import itu dikasih line break

src/pages/CreateKas/partials/UploadImage.tsx

…ions file add: subbmission form request and error required

…ionality,

…Kas submission

Rendy752 · 2025-02-12T12:15:16Z

ada error syntax pas pertama kali open kas submission

Rendy752 · 2025-02-12T12:24:09Z

untuk drag file emang g bisa ya? kalo iya ubah placholder nya jadi "Select image to upload" dengan ubah file accept type ny cuma .png, .jpg aja

Rendy752 · 2025-02-12T12:55:00Z

Ini optional aja, buat minimalisir user salah upload image, bisa pake 2 pendekatan:

tambah button "X" diujung atas kanan image preview untuk delete image pake api delete /file/images/:id file-upload-controller
atau buat image yang udah diupload cuma nge store data file di frontend dlu, jadi blum hit api post /file/images, untuk buat url untuk di preview image nya pake FileReader bawaan
file-upload.tsx
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
useEffect(() => { const reader = new FileReader(); reader.onloadend = () => { setPreviewUrl(reader.result as string); }; reader.readAsDataURL(file); }, [file]);
jadi pas sudah klik button submit submission, hit api post /file/images, dpetin id untuk image dlu, lalu passing ke data kas submission untuk di submit semua data nya

tsconfig.json

fanesz · 2025-02-13T13:34:03Z

src/common/utils/localStorage.ts

@@ -0,0 +1,18 @@
+export const LocalStorage = (key: string) => {


penamaan pascal case itu biasanya untuk nama class atau component.
kalo cuma variable/function, pake camel case

Suggested change

export const LocalStorage = (key: string) => {

export const localStorage = (key: string) => {

fanesz · 2025-02-13T13:34:39Z

src/pages/CreateKas/partials/SearchUser.tsx

+import useGetUser from "../hooks/useGetUser";
+import { LocalStorage } from "@utils/localStorage";
+
+const SearchUser = () => {


penamaan komponen bikin lebih spesifik,
misal SearchUserButton

fanesz · 2025-02-13T13:34:51Z

src/pages/CreateKas/partials/QuickNote.tsx

+import { useFormContext } from "react-hook-form";
+import { LocalStorage } from "@utils/localStorage";
+
+const QuickNote: React.FC = () => {


penamaan komponen bikin lebih spesifik

fanesz · 2025-02-13T13:35:03Z

src/pages/CreateKas/partials/PayedAmount.tsx

+import glassmorphism from "@utils/glassmorphism";
+import { Controller, useFormContext } from "react-hook-form";
+
+const PayedAmount: React.FC = () => {


penamaan komponen bikin lebih spesifik

fanesz · 2025-02-13T13:36:50Z

src/pages/CreateKas/hooks/useGetUser.ts

+  handleActiveUser: () => void;
+}
+
+const useGetUser = (): HookReturn => {


terlalu spesifik, kalo getUser lebih jadi kayak usecase, bukan hooks,
mending useUser. yg relate dgn user, taruh disini nanti

…opzone, and change name to useLocalStorage and useUser.

jeflijonathan2327240094 and others added 4 commits July 23, 2024 20:49

add: form create kas submission

0db0c32

fix: form submit api

6b529e2

update: form template design

f8500ca

remove: unused package

ba48f60

jeflijonathan2327240094 requested a review from fanesz August 1, 2024 06:24

edit: package.json

c937c5e

Rendy752 force-pushed the feature/create-kas-submission branch from c937c5e to ba48f60 Compare August 1, 2024 08:16

Rendy752 and others added 4 commits August 1, 2024 15:19

edit: package.json

0e380b7

Merge branch 'development' into feature/create-kas-submission

1af18b2

edit: package.json

6134482

fix: error in package and add: global Button components

0d92cf2

jeflijonathan2327240094 linked an issue Aug 1, 2024 that may be closed by this pull request

Feature/Create Kas Submission #3

Open

6 tasks

remove: unused package

0560431

fanesz requested changes Aug 1, 2024

View reviewed changes

fanesz assigned jeflijonathan2327240094 Aug 1, 2024

jeflijonathan2327240094 added 14 commits August 2, 2024 14:52

update: snackbar and field upload in background image url.

adeee4d

remove: unused package and unused import

5bd1338

remove: console log in api

9860a58

update: change name file and name class KasSubmission services

bff1414

Update: header in api services

db637ca

update: Folder API and file API, Add: model API

841c879

Update: Upload model

e3f5cd2

update: model balanceHistory

a5fbcc4

update: service Kas Submission, file, name folder, package, and locat…

2364593

…ions file add: subbmission form request and error required

update: context kas submission

1bc8be5

update: kas submission context

0c1a796

Add: localstorage in utils

d057ad9

Fixed: upload image

7b30b83

update: tidy up the code

eae6a71

jeflijonathan2327240094 added 10 commits February 2, 2025 16:02

Add: debouncer for search

3d1cc88

change: To implement a 1-second delay (debounce) for the search funct…

ebcf348

…ionality,

Add: Active NPM in the select input.

29aa174

Remove: unused import

a4fb4cb

Remove: unused line

7b53288

remove: unused line

6975ae1

remove: unused imports

b4ca056

remove: Field in SerachUser

66b6244

remove: common in api folder

146258c

add:loading submit

4abab30

jeflijonathan2327240094 requested a review from fanesz February 2, 2025 11:29

jeflijonathan2327240094 added 6 commits February 2, 2025 20:11

Add: Redirect after successfully completing the Kas submission

fd6ab34

Remove:console log

67abeb5

Change: success message (Successfully, Wait for Admin Validation) in …

306823d

…Kas submission

remove: unused line

4735cab

unusend class and change condition becomes using the and operator

d59a07a

remove: unusend class

8cbf2ca

Rendy752 self-requested a review February 12, 2025 12:57

fixed:error in user hook

3046143

fanesz requested changes Feb 13, 2025

View reviewed changes

jeflijonathan2327240094 and others added 5 commits February 27, 2025 16:30

Change: Uploading File before submit, components image preview and dr…

4980be9

…opzone, and change name to useLocalStorage and useUser.

Change: name of file and fixed: Logic uploading

e296d63

Change: onDrop

7752cdc

Change: Amount Paid

4949d9b

Remove: setState for create kas loading

cc8f6a0

jeflijonathan2327240094 requested a review from fanesz March 8, 2025 09:34

Rendy752 approved these changes Mar 8, 2025

View reviewed changes

		@@ -0,0 +1,18 @@
		export const LocalStorage = (key: string) => {

Create Kas Submission Page #16

Are you sure you want to change the base?

Create Kas Submission Page #16

Uh oh!

Conversation

jeflijonathan2327240094 commented Aug 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fanesz commented Aug 1, 2024

Uh oh!

fanesz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Rendy752 commented Feb 12, 2025

Uh oh!

Rendy752 commented Feb 12, 2025

Uh oh!

Rendy752 commented Feb 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jeflijonathan2327240094 commented Aug 1, 2024 •

edited

Loading

Rendy752 commented Feb 12, 2025 •

edited

Loading