progress 1 dashboard-create-claim-request

Modules/Internal/Http/Controllers/Api/ClaimRequestController.php

@@ -477,4 +477,37 @@ class ClaimRequestController extends Controller
         }
         return Helper::responseJson(data: $request->toArray(), message: 'Invoice Success Uploaded');
     }
+
+    /**
+     * Get Claim Member - Infinite Scroll
+     *
+     * Bagaskoro, BSD 31 Oktober 2023
+     */
+    public function getClaimMemberInfiniteScroll(Request $request)
+    {
+        $offset  = 0;
+        $limit   = 10;
+        $page    = $request->get('page');
+        $keyword = $request->get('keyword');
+
+        if ($page > 1) {
+            $offset = ($page*$limit)-$limit;
+        }
+
+        $memberList = DB::table('members')
+            ->select('id','member_id','name')
+            ->where("name", "like", "%$keyword%")
+            ->orderBy('created_at', 'asc')
+            ->offset($offset)
+            ->limit($limit)
+            ->get();
+
+        return response()->json([
+            'error'   => false,
+            'message' => "success",
+            'data'    => [
+                'member_list'=> $memberList,
+            ]
+        ],200);
+    }
 }

Modules/Internal/Routes/api.php

@@ -245,6 +245,7 @@ Route::prefix('internal')->group(function () {
             Route::post('files-mcu', 'filesMcu');
         });
         Route::get('claim-requests', [ClaimRequestController::class, 'index'])->name('claim-requests.index');
+        Route::get('claim-requests/list-member', [ClaimRequestController::class, 'getClaimMemberInfiniteScroll']); // Bagaskoro, BSD 31 Oktober 2023
         Route::post('claim-requests/{id}/approve', [ClaimRequestController::class, 'approve'])->name('claim-requests.approve');
         Route::get('claim-requests/{id}', [ClaimRequestController::class, 'show'])->name('claim-requests.show');
         Route::put('claim-requests/{id}', [ClaimRequestController::class, 'update'])->name('claim-requests.update');

frontend/dashboard/pnpm-lock.yaml

@@ -149,6 +149,9 @@ dependencies:
   vite-plugin-svgr:
     specifier: ^2.4.0
     version: 2.4.0(rollup@2.79.1)(vite@3.2.7)
+  yarn:
+    specifier: ^1.22.19
+    version: 1.22.19
   yup:
     specifier: ^0.32.11
     version: 0.32.11
@@ -7889,6 +7892,13 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
+  /yarn@1.22.19:
+    resolution: {integrity: sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==}
+    engines: {node: '>=4.0.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: false
+
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}

frontend/dashboard/src/hooks/useLoadOnScroll.ts

@@ -0,0 +1,98 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+interface FetchFunction<T> {
+  (page: number): Promise<T[]>;
+}
+
+const useLoadOnScroll = <T>(executeFetch: FetchFunction<T>) => {
+  const [data, setData] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [page, setPage] = useState<number>(1);
+  const [listener, setListener] = useState<number>(1);
+  const [lastPage, setLastPage] = useState<boolean>(false);
+
+  const fetchData = async (isSearch?: boolean) => {
+    if (!lastPage || isSearch === true)
+      if (isLoading === false) {
+        setIsLoading(true);
+        if (isSearch === true) {
+          const newData = await executeFetch(1);
+          if (newData.length > 0) {
+            setData(newData);
+            setPage((prevPage) => 2);
+          } else {
+            setLastPage(true);
+            setData([]);
+          }
+        } else {
+          const newData = await executeFetch(page);
+          if (newData.length > 0) {
+            setData((prevData) => [...prevData, ...newData]);
+            setPage((prevPage) => prevPage + 1);
+          } else {
+            setLastPage(true);
+          }
+        }
+
+        setIsLoading(false);
+      }
+  };
+
+  const refetchData = () => {
+    setPage(1);
+    setListener((prev) => prev + 1);
+  };
+
+  const resetLastPage = () => {
+    setLastPage(false);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [listener]);
+
+  // useEffect(() => {
+  //   if (data.length === 0) {
+  //     fetchData();
+  //   }
+  // }, [data]);
+
+  const handleScroll = () => {
+    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
+
+    if (scrollTop + clientHeight >= scrollHeight - 1) {
+      setListener((prevListener) => prevListener + 1);
+    }
+  };
+
+  const resetSearch = () => {
+    console.log('reset search');
+    fetchData(true);
+    resetLastPage();
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const onClose = () => {
+    setData([]);
+    setPage(1);
+    setLastPage(false);
+  };
+
+  const onOpen = () => {
+    setData([]);
+    setLastPage(false);
+    fetchData(true);
+  };
+
+  // setData and setPage to reset when the dialog closed
+  return { data, isLoading, setPage, setData, resetSearch, resetLastPage, onClose, onOpen, refetchData };
+};
+
+export default useLoadOnScroll;

frontend/dashboard/src/pages/ClaimRequests/CreateUpdate.tsx

@@ -1,4 +1,6 @@
 import * as Yup from 'yup';
+import { Box, IconButton } from '@mui/material';
+import { ArrowBackIosNew } from '@mui/icons-material';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Autocomplete, Button, Card, Collapse, Container, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
@@ -17,45 +19,57 @@ import { fCurrency } from '../../utils/formatNumber';
 import Iconify from '../../components/Iconify';
 import { ClaimRequest } from '@/@types/claims';
 import Form from './Form';
+import FormCreate from './FormCreate';
 
 export default function ClaimsCreateUpdate() {
 
+    const navigate = useNavigate()
+    const { themeStretch } = useSettings();
+    const { id } = useParams();
 
-  const { themeStretch } = useSettings();
+    const isEdit = id ? true : false;
-  const { id } = useParams();
 
-  const isEdit = id ? true : false;
+    const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
 
-  const [currentClaim, setCurrentClaim] = useState<ClaimRequest>();
+    useEffect(() => {
+        if (isEdit) {
+        axios.get('/claim-requests/' + id).then((res) => {
+            console.log('Yeet', res.data);
+            setCurrentClaim(res.data.data);
+        });
 
-  useEffect(() => {
+        console.log(currentClaim)
-    if (isEdit) {
+        }
-      axios.get('/claim-requests/' + id).then((res) => {
+    }, [id]);
-        console.log('Yeet', res.data);
-        setCurrentClaim(res.data.data);
-      });
-
-      console.log(currentClaim)
-    }
-  }, [id]);
 
 
   return (
     <Page title={isEdit ? `Edit Claim Request` : "Create New Claim"}>
       <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Stack direction="row" alignItems="center">
+        <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
-          <HeaderBreadcrumbs
+            <Box sx={{ display: 'flex', alignItems: 'center'}}>
-            heading={'Edit Claim Request'}
+                <IconButton size='large' color='inherit' onClick={() => navigate(`/claim-requests`)} >
-            links={[
+                    <ArrowBackIosNew/>
-              { name: 'Dashboard', href: '/dashboard' },
+                </IconButton>
-              {
+
-                name: 'Claim Request',
+                <Typography variant="h5" sx={{ marginLeft: '24px' }}>
-              },
+                    {id == undefined ? 'Create Claim Requests' : 'Edit Claim Requests'}
-            ]}
+                </Typography>
-          />
+            </Box>
         </Stack>
 
-        <Form isEdit={isEdit} currentClaim={currentClaim} />
+        {
+            id == undefined
+            ?
+            (
+                <FormCreate />
+            )
+            :
+            (
+                <Form isEdit={isEdit} currentClaim={currentClaim} />
+            )
+        }
+
       </Container>
     </Page>
   );

frontend/dashboard/src/pages/ClaimRequests/FormCreate.tsx

@@ -0,0 +1,110 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect, useState } from 'react';
+import { Box, FormControlLabel, Grid, Checkbox, Typography, CircularProgress , Button, styled} from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import Label from '@/components/Label';
+// - Local -
+import FormCreateSearch from './FormCreateSearch';
+
+/**
+ * Icon, Utils, Types, Functions, theme, hook
+ * ============================================
+ */
+import { MemberListType } from './Model/Types';
+import { getMemberList } from './Model/Functions';
+import useLoadOnScroll from '@/hooks/useLoadOnScroll';
+import FormCreateListChoose from './FormCreateListChoose';
+
+/**
+ * Custom Style
+ * ============================================
+*/
+const DivCustom1 = styled('div')(({ theme }) => ({
+    left: '350px',
+    [theme.breakpoints.between('sm', 'lg')]: {
+        left: '0px',
+    },
+}));
+
+export default function FormCreate() {
+    // State
+    // -------------------------
+    const [keyword, setKeyword]         = useState<string>('');
+    const [listChoosed, setListChoosed] = useState<MemberListType[]>([]);
+    const [isChoosed, setIsChoosed]     = useState<boolean>(false);
+
+    // List Choose - auto Scroll
+    // -------------------------
+    const fetchFunction = async (page: number): Promise<MemberListType[]> => getMemberList(page, keyword)
+    const {data: MemberList, isLoading, setData, resetLastPage, refetchData} = useLoadOnScroll<MemberListType>(fetchFunction);
+
+    // List Choose - Search
+    // -------------------------
+    const handleSearch = (keyword: string) => {
+        setData([])
+        resetLastPage()
+        setKeyword(keyword)
+        refetchData()
+    }
+
+    return (
+        <Box sx={{ position: 'relative' }}>
+            {/* Choose Section */}
+            <Grid container spacing={4} sx={{ px: 2, display: isChoosed==false ? 'inherit' : 'none' }}>
+                {/* Search */}
+                <Grid item xs={12}>
+                    <FormCreateSearch onEmpty={() => handleSearch('')} onSubmit={(keyword) => handleSearch(keyword)} />
+                </Grid>
+
+                <Grid item xs={12}>
+                    <Grid container spacing={2}>
+                        {/* List */}
+                        <Grid item xs={12}>
+                            <Grid container spacing={2}>
+                                {
+                                    MemberList.map((row, index) => {
+                                        return (
+                                            <FormCreateListChoose
+                                                key={index}
+                                                data={row}
+                                                ListChoosed={listChoosed}
+                                                handleCheckedProp={(checked, data) => {
+                                                    checked ? setListChoosed((prevData) => [...prevData, data]) : setListChoosed((items) => items.filter(item => item.id != data.id))
+                                                }}
+                                            />
+                                        )
+                                    })
+                                }
+                            </Grid>
+                        </Grid>
+
+                        {/* Loading */}
+                        <Grid item xs={12} sx={{ display: isLoading === false ? 'none' : 'flex', justifyContent: 'center', marginTop: '40px' }}>
+                            <CircularProgress />
+                        </Grid>
+
+                        {/* Submit List */}
+                        <Grid item xs={12}>
+                            <DivCustom1 sx={{ position: 'fixed', bottom: 0, right: 0, background: 'white', px: 4, pt: 4, pb: 6}}>
+                                <Button variant="contained" color="primary" disabled={listChoosed.length==0} sx={{ width: '100%', p: '11px' }} onClick={() => {setIsChoosed(true)}}>
+                                    Create Number Batch ({listChoosed.length})
+                                </Button>
+                            </DivCustom1>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+
+            {/* Input Section */}
+
+        </Box>
+    )
+}

frontend/dashboard/src/pages/ClaimRequests/FormCreateListChoose.tsx

@@ -0,0 +1,78 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect, useState } from 'react';
+import { Box, FormControlLabel, Grid, Checkbox, Typography, Card} from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import Label from '@/components/Label';
+// - Local -
+
+/**
+ * Icon, Utils, Types, Functions, theme, hook
+ * ============================================
+ */
+import { fDateTimesecond } from '@/utils/formatTime';
+import { MemberListType } from './Model/Types';
+import palette from '@/theme/palette';
+
+/**
+ * Props
+ * =====================================================
+ */
+type Props = {
+    data: MemberListType,
+    ListChoosed: MemberListType[],
+    handleCheckedProp: (checked: boolean, data: MemberListType) => void,
+};
+
+export default function FormCreateListChoose({data, ListChoosed, handleCheckedProp}: Props) {
+    const [isChoosed, setIsChoosed] = useState<boolean>(false)
+
+    useEffect(() => {
+        setIsChoosed(false);
+
+        ListChoosed.forEach(list => {
+            if (list.id == data.id) {
+                setIsChoosed(true);
+            }
+        })
+    }, [ListChoosed])
+
+    return (
+        <Grid item xs={12}>
+            <Card sx={{
+                border: '0px solid rgba(0,0,0,0.125)', px: '24px', py: '16px', borderRadius: '12px', display: 'flex', justifyContent: 'space-between',
+                bgcolor: (theme) => {
+                    return isChoosed ? palette.light.primary.lighter : palette.light.background.default
+                }
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', px: '8px'}}>
+                    <FormControlLabel
+                        label=""
+                        control={<Checkbox onChange={(event, checked) => handleCheckedProp(checked, data)} />}
+                        checked={isChoosed}
+                    />
+
+                    <Box>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                            {data.name}
+                        </Typography>
+                        <Typography variant="caption" color={palette.light.grey[500]} sx={{ fontWeight: 600 }}>
+                            {data.member_id}
+                        </Typography>
+                    </Box>
+                </Box>
+
+                <Label variant="ghost" color="default">
+                    {fDateTimesecond(new Date())}
+                </Label>
+            </Card>
+        </Grid>
+    )
+}

frontend/dashboard/src/pages/ClaimRequests/FormCreateSearch.tsx

@@ -0,0 +1,70 @@
+/**
+ * Core
+ * ============================================
+ */
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Grid } from '@mui/material';
+
+/**
+ * Components
+ * ============================================
+*/
+// - Global -
+import { FormProvider, RHFTextField } from '@/components/hook-form';
+// - Local -
+
+/**
+ * Icon, Utils, Types, Functions
+ * ============================================
+ */
+import { Search } from '@mui/icons-material';
+import { SearchType } from './Model/Types';
+
+type Props = {
+    onSubmit: (keyword: string) => void,
+    onEmpty: () => void,
+};
+
+const FormCreateSearch = ({ onSubmit, onEmpty }: Props) => {
+    const defaultValuesSearchForm = {
+        keyword: ''
+    };
+
+    const methodsSearchForm = useForm<SearchType>({
+        defaultValues: defaultValuesSearchForm
+    });
+
+    const { handleSubmit, formState: { isDirty } } = methodsSearchForm;
+
+    // search on submit
+    const onSubmitSearch = (data: SearchType ) => {
+        onSubmit(data.keyword);
+    }
+
+    // search on empty
+    useEffect(() => {
+        if (isDirty === false) {
+            onEmpty()
+        }
+    },[isDirty])
+
+    return (
+        <FormProvider methods={methodsSearchForm} onSubmit={handleSubmit(onSubmitSearch)}>
+            <Grid container direction={"row"}>
+                <Grid item xs={12}>
+                    <RHFTextField
+                        name="keyword"
+                        placeholder="Search..."
+                        autoComplete='off'
+                        fullWidth
+                        InputProps={{ startAdornment: <Search /> }}
+                        sx={{ input: { paddingLeft: '14px' } }}
+                    />
+                </Grid>
+            </Grid>
+        </FormProvider>
+    )
+}
+
+export default FormCreateSearch

frontend/dashboard/src/pages/ClaimRequests/List.tsx

@@ -222,7 +222,7 @@ export default function List() {
               startIcon={<AddIcon />}
               sx={{ p: 1.8 }}
               onClick={() => {
-                navigate('/claims/create');
+                navigate('/claim-requests/create');
               }}
             >
               Create

frontend/dashboard/src/pages/ClaimRequests/Model/Functions.tsx

@@ -0,0 +1,22 @@
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { MemberListType } from './Types';
+
+/**
+ * Listing Member
+ */
+export const getMemberList = async ( page: number, keyword: string ): Promise<MemberListType[]> => {
+    const response = await axios.get(`/claim-requests/list-member?page=${page}&keyword=${keyword}`)
+        .then((res) =>{
+            return res.data.data.member_list;
+        })
+        .catch((res) => {
+            enqueueSnackbar("server error !", {
+                variant: 'error',
+            });
+
+            return [];
+        });
+
+    return response;
+};

frontend/dashboard/src/pages/ClaimRequests/Model/Types.tsx

@@ -0,0 +1,15 @@
+/**
+ * Search Type
+ */
+export type SearchType = {
+    keyword: string,
+}
+
+/**
+ * Member List
+ */
+export type MemberListType = {
+    id          : string,
+    member_id   : string,
+    name        : string,
+}

frontend/dashboard/src/routes/index.tsx

@@ -430,18 +430,6 @@ export default function Router() {
           path: 'claims',
           element: <Claims />,
         },
-        {
-          path: 'claim-requests',
-          element: <ClaimRequests />,
-        },
-        {
-          path: 'claim-requests/edit/:id',
-          element: <ClaimRequestsCreate />,
-        },
-        {
-          path: 'claim-requests/detail/:id',
-          element: <ClaimRequestsDetail />,
-        },
         {
           path: 'claims/create',
           element: <ClaimsCreate />,
@@ -458,6 +446,22 @@ export default function Router() {
           path: 'claims/:id',
           element: <ClaimShow />,
         },
+        {
+          path: 'claim-requests',
+          element: <ClaimRequests />,
+        },
+        {
+          path: 'claim-requests/create',
+          element: <ClaimRequestsCreate />,
+        },
+        {
+          path: 'claim-requests/edit/:id',
+          element: <ClaimRequestsCreate />,
+        },
+        {
+          path: 'claim-requests/detail/:id',
+          element: <ClaimRequestsDetail />,
+        },
         {
           path: 'profile',
           element: <Profile />,

frontend/dashboard/src/theme/palette.ts

@@ -62,11 +62,11 @@ declare module '@mui/material' {
 
 // SETUP COLORS
 const PRIMARY = {
-  lighter: '#D0FBEC',
+    lighter: '#D1F1F1',
-  light: '#70EAD5',
+    light: '#70EAD5',
-  main: '#19BBBB',
+    main: '#19BBBB',
-  dark: '#0C7186',
+    dark: '#0C7186',
-  darker: '#043C59',
+    darker: '#043C59',
 };
 const SECONDARY = {
   lighter: '#D6E4FF',