Compare commits

..
3 Commits
67 changed files with 372 additions and 769 deletions
@@ -1,5 +1,13 @@
# API Endpoint
VITE_API_URL=
# Payload CMS Secret Key (minimum 32 characters)
CMS_SECRET=your-very-long-secret-key
# PostgreSQL Connection String
CMS_POSTGRES_URL=postgres://user:password@host:port/database
# S3 Storage Configuration
CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
+5 -26
View File
@@ -6,10 +6,9 @@
This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
2. **Backoffice** - Application for internal management.
3. **Dimentorin** - Application for mentoring services.
## How to install
@@ -25,15 +24,6 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
## How to run
### Setup Environment Variables
Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
```sh
cd apps/{appname}
cp .env.example .env
```
### Development
Use the following commands to run in development mode:
@@ -50,10 +40,6 @@ Use the following commands to run in development mode:
```sh
npm run dimentorin:dev
```
- **Landing Page**:
```sh
npm run landing:dev
```
### Build
@@ -71,10 +57,6 @@ Use the following commands to build the applications:
```sh
npm run dimentorin:build
```
- **Landing Page**:
```sh
npm run landing:build
```
### Production
@@ -92,22 +74,19 @@ Use the following commands to run the applications in production mode:
```sh
npm run dimentorin:prod
```
- **Landing Page**:
```sh
npm run landing:prod
```
### Storybook
This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:
- **Run Storybook**
This command starts Storybook in development mode, allowing you to view and test UI components interactively.
```sh
npm run ui:storybook
```
- **Run Unit Test**
-1
View File
@@ -1 +0,0 @@
VITE_API_URL=
@@ -2,19 +2,24 @@ import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
import { useSession } from '@imphnen-frontend-service/utils';
import { toast } from 'sonner';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const { signIn } = useSession();
const onSubmit = form.handleSubmit((data) => signIn(data));
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => toast.success("Login sukses"),
onError: (error) => toast.error(error.message),
});
});
return {
form,
@@ -18,7 +18,7 @@ import {
RowSelectionState,
} from '@tanstack/react-table';
import ModalEditAccount from './_components/modal-edit-account';
import { useQueryState } from '@imphnen-frontend-service/utils';
import { useQueryState } from '../../hook/use-query-state';
interface Account {
id: number;
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
</Button>
{showFilter && (
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
<Filter onClose={() => setShowFilter(false)} options={[]} />
<Filter onClose={() => setShowFilter(false)} />
</div>
)}
</div>
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
@@ -10,7 +10,7 @@ import { FC, Fragment, ReactElement, useState } from 'react';
import ModalAddItem from './_components/modal-add-item';
import ModalEditItem from './_components/modal-edit-item';
import ModalDeleteItem from './_components/modal-delete-item';
import { useQueryState } from '@imphnen-frontend-service/utils';
import { useQueryState } from '../../hook/use-query-state';
export const Components: FC = (): ReactElement => {
const [showModalAddItem, setShowModalAddItem] = useState(false);
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
@@ -32,16 +32,7 @@ export const Components: FC = (): ReactElement => {
size="lg"
className="w-full"
/>
<Button
disabled={
form.formState.isSubmitting ||
form.formState.isValidating ||
!form.formState.isValid
}
type="submit"
size="md"
className="w-full"
>
<Button type="submit" size="md" className="w-full">
Login
</Button>
</form>
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
+18
View File
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
+18
View File
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
@@ -0,0 +1,18 @@
import { FC, ReactElement } from 'react';
import { Outlet } from 'react-router-dom';
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => {
return (
<div className="bg-primary-50 min-h-screen flex justify-center">
<div className="bg-primary-50 min-h-screen w-full flex">
<BackofficeSidebar />
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
<Outlet />
</div>
</div>
</div>
);
};
export default AppLayout;
+3 -100
View File
@@ -1,108 +1,11 @@
import {
PERMISSIONS,
SessionToken,
SessionUser,
} from '@imphnen-frontend-service/utils';
import { LoaderFunctionArgs, redirect } from 'react-router';
const mappingPublicRoutes = [
'/auth/login',
'/auth/forgot',
'/auth/new-password',
];
const mappingRoutePermissions = [
{
path: '/dashboard',
permissions: [],
},
{
path: '/users',
permissions: [PERMISSIONS.USERS.READ_LIST],
},
{
path: '/users/create',
permissions: [PERMISSIONS.USERS.CREATE],
},
{
path: '/users/update',
permissions: [PERMISSIONS.USERS.UPDATE],
},
{
path: '/users/detail',
permissions: [PERMISSIONS.USERS.READ_DETAIL],
},
{
path: '/roles',
permissions: [PERMISSIONS.ROLES.READ_LIST],
},
{
path: '/roles/create',
permissions: [PERMISSIONS.ROLES.CREATE],
},
{
path: '/roles/update',
permissions: [PERMISSIONS.ROLES.UPDATE],
},
{
path: '/roles/detail',
permissions: [PERMISSIONS.ROLES.READ_DETAIL],
},
{
path: '/permissions',
permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
},
{
path: '/permissions/create',
permissions: [PERMISSIONS.PERMISSIONS.CREATE],
},
{
path: '/permissions/update',
permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
},
{
path: '/permissions/detail',
permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
},
];
//TODO : Fix this later
// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
// const fallback = mappingRoutePermissions.find((route) =>
// route.permissions.some((perm) => userPermissions.includes(perm))
// );
// return redirect(fallback?.path ?? '/auth/login');
// };
import { LoaderFunctionArgs } from 'react-router-dom';
export const middleware = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const pathname = url.pathname;
const session = SessionUser.get();
const session_token = SessionToken.get();
const token = session_token?.token?.access_token;
const userPermissions =
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
if (mappingPublicRoutes.includes(pathname)) {
if (token) return redirect('/dashboard');
return null;
}
if (!session) return redirect('/auth/login');
const matchedRoute = mappingRoutePermissions.find(
(route) => route.path === pathname
);
if (matchedRoute) {
const hasPermission =
!matchedRoute.permissions ||
matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
if (!hasPermission) {
return '/dashboard';
}
}
if (pathname) return null;
return null;
};
-1
View File
@@ -1 +0,0 @@
VITE_API_URL=
+9 -4
View File
@@ -2,19 +2,24 @@ import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
import { useSession } from '@imphnen-frontend-service/utils';
import { toast } from 'sonner';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const { signIn } = useSession();
const onSubmit = form.handleSubmit((data) => signIn(data));
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => toast.success("Login sukses"),
onError: (error) => toast.error(error.message),
});
});
return {
form,
+3 -101
View File
@@ -1,109 +1,11 @@
import {
PERMISSIONS,
SessionToken,
SessionUser,
} from '@imphnen-frontend-service/utils';
import { LoaderFunctionArgs, redirect } from 'react-router';
const mappingPublicRoutes = [
'/',
'/auth/login',
'/auth/forgot',
'/auth/new-password',
];
const mappingRoutePermissions = [
{
path: '/dashboard',
permissions: [],
},
{
path: '/users',
permissions: [PERMISSIONS.USERS.READ_LIST],
},
{
path: '/users/create',
permissions: [PERMISSIONS.USERS.CREATE],
},
{
path: '/users/update',
permissions: [PERMISSIONS.USERS.UPDATE],
},
{
path: '/users/detail',
permissions: [PERMISSIONS.USERS.READ_DETAIL],
},
{
path: '/roles',
permissions: [PERMISSIONS.ROLES.READ_LIST],
},
{
path: '/roles/create',
permissions: [PERMISSIONS.ROLES.CREATE],
},
{
path: '/roles/update',
permissions: [PERMISSIONS.ROLES.UPDATE],
},
{
path: '/roles/detail',
permissions: [PERMISSIONS.ROLES.READ_DETAIL],
},
{
path: '/permissions',
permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
},
{
path: '/permissions/create',
permissions: [PERMISSIONS.PERMISSIONS.CREATE],
},
{
path: '/permissions/update',
permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
},
{
path: '/permissions/detail',
permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
},
];
//TODO : Fix this later
// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
// const fallback = mappingRoutePermissions.find((route) =>
// route.permissions.some((perm) => userPermissions.includes(perm))
// );
// return redirect(fallback?.path ?? '/auth/login');
// };
import { LoaderFunctionArgs } from 'react-router-dom';
export const middleware = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const pathname = url.pathname;
const session = SessionUser.get();
const session_token = SessionToken.get();
const token = session_token?.token?.access_token;
const userPermissions =
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
if (mappingPublicRoutes.includes(pathname)) {
if (token) return redirect('/dashboard');
return null;
}
if (!session) return redirect('/auth/login');
const matchedRoute = mappingRoutePermissions.find(
(route) => route.path === pathname
);
if (matchedRoute) {
const hasPermission =
!matchedRoute.permissions ||
matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
if (!hasPermission) {
return '/dashboard';
}
}
if (pathname) return null;
return null;
};
-1
View File
@@ -1 +0,0 @@
VITE_API_URL=
+7 -4
View File
@@ -2,19 +2,22 @@ import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
import { useSession } from '@imphnen-frontend-service/utils';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const { signIn } = useSession();
const onSubmit = form.handleSubmit((data) => signIn(data));
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => console.log('Success Login'),
});
});
return {
form,
+24 -1
View File
@@ -1,11 +1,14 @@
import { useForm } from 'react-hook-form';
import {
authRegisterSchema,
stepOneRegisterSchema,
TRegisterRequest,
usePostRegister,
} from '@imphnen-frontend-service/service';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { toast } from 'sonner';
import { useEffect, useState } from 'react';
export const useRegister = () => {
const postRegister = usePostRegister();
@@ -18,12 +21,31 @@ export const useRegister = () => {
password: '',
confirm_password: '',
phone_number: '',
referral_code: '',
referred_by: '',
student_type: '',
},
});
const [stepValid, setStepValid] = useState(false);
useEffect(() => {
const subscription = form.watch(() => {
const { fullname, email, password, confirm_password } = form.getValues();
const valid = stepOneRegisterSchema.safeParse({
fullname,
email,
password,
confirm_password,
}).success;
setStepValid(valid);
});
return () => subscription.unsubscribe();
}, [form]);
const onSubmit = form.handleSubmit((data) => {
postRegister.mutate(data, {
onSuccess: () => toast.success('Registrasi sukses'),
onSuccess: (data) => toast.success(data.message),
onError: (error) => toast.error(error.message),
});
});
@@ -31,5 +53,6 @@ export const useRegister = () => {
return {
form,
onSubmit,
isStepOneValid: stepValid,
};
};
+3 -101
View File
@@ -1,109 +1,11 @@
import {
PERMISSIONS,
SessionToken,
SessionUser,
} from '@imphnen-frontend-service/utils';
import { LoaderFunctionArgs, redirect } from 'react-router';
const mappingPublicRoutes = [
'/',
'/auth/login',
'/auth/forgot',
'/auth/new-password',
];
const mappingRoutePermissions = [
{
path: '/dashboard',
permissions: [],
},
{
path: '/users',
permissions: [PERMISSIONS.USERS.READ_LIST],
},
{
path: '/users/create',
permissions: [PERMISSIONS.USERS.CREATE],
},
{
path: '/users/update',
permissions: [PERMISSIONS.USERS.UPDATE],
},
{
path: '/users/detail',
permissions: [PERMISSIONS.USERS.READ_DETAIL],
},
{
path: '/roles',
permissions: [PERMISSIONS.ROLES.READ_LIST],
},
{
path: '/roles/create',
permissions: [PERMISSIONS.ROLES.CREATE],
},
{
path: '/roles/update',
permissions: [PERMISSIONS.ROLES.UPDATE],
},
{
path: '/roles/detail',
permissions: [PERMISSIONS.ROLES.READ_DETAIL],
},
{
path: '/permissions',
permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
},
{
path: '/permissions/create',
permissions: [PERMISSIONS.PERMISSIONS.CREATE],
},
{
path: '/permissions/update',
permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
},
{
path: '/permissions/detail',
permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
},
];
//TODO : Fix this later
// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
// const fallback = mappingRoutePermissions.find((route) =>
// route.permissions.some((perm) => userPermissions.includes(perm))
// );
// return redirect(fallback?.path ?? '/auth/login');
// };
import { LoaderFunctionArgs } from 'react-router-dom';
export const middleware = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const pathname = url.pathname;
const session = SessionUser.get();
const session_token = SessionToken.get();
const token = session_token?.token?.access_token;
const userPermissions =
session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
if (mappingPublicRoutes.includes(pathname)) {
if (token) return redirect('/dashboard');
return null;
}
if (!session) return redirect('/auth/login');
const matchedRoute = mappingRoutePermissions.find(
(route) => route.path === pathname
);
if (matchedRoute) {
const hasPermission =
!matchedRoute.permissions ||
matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
if (!hasPermission) {
return '/dashboard';
}
}
if (pathname) return null;
return null;
};
+6
View File
@@ -6,6 +6,7 @@ import {
TRegisterRequest,
TVerifyEmailRequest,
} from '../../types/auth';
import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
import { TResponseError, TResponseMessage } from '../../types/common';
@@ -18,6 +19,11 @@ export const usePostLogin = (): UseMutationResult<
return useMutation({
mutationKey: ['post-login'],
mutationFn: async (payload) => await postLogin(payload),
onSuccess: (res) => {
SessionUser.set(res.data.user);
SessionToken.set(res.data.token);
window.location.reload();
},
});
};
+26 -7
View File
@@ -16,7 +16,7 @@ export const authLoginSchema = z.object({
.min(1, 'Password tidak boleh kosong'),
});
export const authRegisterSchema = z
export const stepOneRegisterSchema = z
.object({
email: z
.string({
@@ -25,12 +25,6 @@ export const authRegisterSchema = z
})
.min(1, 'Email tidak boleh kosong')
.email('Email harus valid'),
phone_number: z
.string({
required_error: 'Nomor telepon tidak boleh kosong',
})
.min(1, 'Nomor telepon tidak boleh kosong')
.max(15, 'Nomor telepon tidak boleh lebih dari 15 digit'),
fullname: z
.string({
required_error: 'Nama tidak boleh kosong',
@@ -57,3 +51,28 @@ export const authRegisterSchema = z
message: 'Password dan Konfirmasi Password harus sama',
path: ['confirm_password'],
});
const stepTwoRegisterSchema = z.object({
phone_number: z
.string({
required_error: 'Nomor telepon tidak boleh kosong',
invalid_type_error: 'Nomor telepon harus berupa string',
})
.min(1, 'Nomor telepon tidak boleh kosong')
.max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter'),
referral_code: z
.string()
.min(1, 'Kode referral tidak boleh kosong')
.max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
.optional(),
referred_by: z
.string()
.min(1, 'Kode referral tidak boleh kosong')
.max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
.optional(),
student_type: z.string(),
});
export const authRegisterSchema = stepOneRegisterSchema.and(
stepTwoRegisterSchema
);
+20 -17
View File
@@ -1,26 +1,29 @@
import { z } from 'zod';
import { authLoginSchema, authRegisterSchema } from '../../schemas';
import { TResponseDetail, TResponseMessage } from '../common';
import { TUserItem } from '../users';
export type TTokenItem = {
access_token: string;
refresh_token: string;
export type TLoginRequest = {
email: string;
password: string;
};
export type TLoginItem = {
token?: TTokenItem;
user?: TUserItem;
export type TLoginResponse = {
data: {
token: {
access_token: string;
refresh_token: string;
};
user: TUserItem;
};
};
export type TLoginRequest = z.infer<typeof authLoginSchema>;
export type TLoginResponse = TResponseDetail<TLoginItem>;
export type TRegisterRequest = z.infer<typeof authRegisterSchema>;
export type TRegisterResponse = TResponseDetail<TResponseMessage>;
export type TVerifyOtpRequest = {
otp: number;
export type TRegisterRequest = {
email: string;
fullname: string;
password: string;
phone_number: string;
referral_code?: string;
referred_by?: string;
student_type: string;
confirm_password: string;
};
export type TVerifyEmailRequest = {
+1 -13
View File
@@ -1,19 +1,7 @@
import { AxiosError } from 'axios';
export type TMetaResponse = {
page: number;
per_page: number;
total: number;
};
export type TResponseDetail<T = unknown> = {
export type TResponse<T = unknown> = {
data: T;
message: string;
};
export type TResponseList<T = unknown> = {
data: T[];
meta: TMetaResponse;
};
export type TResponseMessage = {
+3 -11
View File
@@ -1,17 +1,9 @@
import { TPermissionItem } from '../permissions';
export type TRoleDetailItem = {
export type TRoleItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
permissions: TPermissionItem[];
created_at: string;
updated_at: string;
};
export type TRolesListItem = {
id: string;
name: string;
permissions_count: number;
created_at: string;
updated_at: string;
};
+8 -2
View File
@@ -1,4 +1,4 @@
import { TRoleDetailItem } from '../roles';
import { TRoleItem } from '../roles';
export type TUserItem = {
id: string;
@@ -7,7 +7,13 @@ export type TUserItem = {
email: string;
fullname: string;
gender: string;
identity_number: string;
is_active: boolean;
is_profile_completed: boolean;
phone_number: string;
role: TRoleDetailItem;
referral_code: string;
referred_by: string;
religion: string;
student_type: string;
role: TRoleItem;
};
-1
View File
@@ -1 +0,0 @@
export * from './permissions';
-40
View File
@@ -1,40 +0,0 @@
export const PERMISSIONS = {
USERS: {
READ_LIST: 'Read List Users',
READ_DETAIL: 'Read Detail Users',
CREATE: 'Create Users',
UPDATE: 'Update Users',
DELETE: 'Delete Users',
ACTIVATE: 'Activate Users',
},
ROLES: {
READ_LIST: 'Read List Roles',
READ_DETAIL: 'Read Detail Roles',
CREATE: 'Create Roles',
UPDATE: 'Update Roles',
DELETE: 'Delete Roles',
},
PERMISSIONS: {
READ_LIST: 'Read List Permissions',
READ_DETAIL: 'Read Detail Permissions',
CREATE: 'Create Permissions',
UPDATE: 'Update Permissions',
DELETE: 'Delete Permissions',
},
GACHA_CLAIMS: {
CREATE: 'Create Gacha Claims',
READ_DETAIL: 'Read Detail Gacha Claims',
},
GACHA_ITEMS: {
READ_LIST: 'Read List Gacha Items',
READ_DETAIL: 'Read Detail Gacha Items',
CREATE: 'Create Gacha Items',
UPDATE: 'Update Gacha Items',
DELETE: 'Delete Gacha Items',
},
GACHA_ROLLS: {
READ_DETAIL: 'Read Detail Gacha Rolls',
CREATE: 'Create Gacha Rolls',
EXECUTE: 'Execute Gacha Rolls',
},
};
-36
View File
@@ -1,36 +0,0 @@
import Cookies from 'js-cookie';
type TTokenItem = {
access_token: string;
refresh_token: string;
};
const TOKEN_KEY = 'token';
type TStoredToken =
| {
token?: TTokenItem;
}
| undefined;
export const SessionToken = {
set: (val: TStoredToken) => {
Cookies.set(TOKEN_KEY, JSON.stringify(val), {
secure: true,
sameSite: 'Strict',
expires: 7,
});
},
get: (): TStoredToken => {
const token = Cookies.get(TOKEN_KEY);
if (!token) return undefined;
try {
return JSON.parse(token);
} catch {
return undefined;
}
},
remove: () => {
Cookies.remove(TOKEN_KEY);
},
};
+1 -2
View File
@@ -1,4 +1,3 @@
export * from './use-query-state';
export * from './use-auth-store';
export * from './use-modal-login';
export * from './use-session';
export * from './use-modal-login';
-47
View File
@@ -1,47 +0,0 @@
import { create } from 'zustand';
import { TLoginItem } from '@imphnen-frontend-service/service';
import { SessionToken } from '../cookies';
import { SessionUser } from '../local-storage';
export enum ESessionStatus {
Authenticated = 'authenticated',
Authenticating = 'authenticating',
Unauthenticated = 'unauthenticated',
}
type SessionState = {
isLoading: boolean;
session?: TLoginItem;
status?: ESessionStatus;
setLoading: (val: boolean) => void;
setSession: (payload: TLoginItem) => void;
clearSession: () => void;
};
export const useAuthStore = create<SessionState>((set) => {
const session = SessionToken.get();
const user = SessionUser.get();
const isAuthenticated = !!session;
return {
isLoading: false,
session: isAuthenticated ? { ...session, ...user } : undefined,
status: isAuthenticated
? ESessionStatus.Authenticated
: ESessionStatus.Unauthenticated,
setLoading: (val) => set({ isLoading: val }),
setSession: (data) => {
SessionToken.set({ token: data.token });
SessionUser.set(data.user);
set({
session: data,
status: ESessionStatus.Authenticated,
});
},
clearSession: () => {
SessionToken.remove();
SessionUser.remove();
set({ session: undefined, status: ESessionStatus.Unauthenticated });
},
};
});
+12 -27
View File
@@ -1,37 +1,22 @@
import { TLoginRequest, usePostLogin } from '@imphnen-frontend-service/service';
import { useAuthStore } from './';
import { toast } from 'sonner';
import { useNavigate } from 'react-router';
import { SessionToken, SessionUser } from '../local-storage';
export const useSession = () => {
const navigate = useNavigate();
const { mutate, isPending } = usePostLogin();
const { setLoading, setSession, clearSession, session } = useAuthStore();
const signIn = (payload: TLoginRequest) => {
setLoading(true);
mutate(payload, {
onSuccess: (data) => {
toast.success('Login sukses');
setSession(data.data);
navigate(0);
},
onError: (err) => {
toast.error(
err?.response?.data?.message ??
'Terjadi Kesalahan yang tidak diketahui'
);
clearSession();
},
});
const session = {
user: SessionUser.get(),
token: SessionToken.get(),
};
const isAuthenticated = !!session.token?.access_token;
const signOut = () => {
clearSession();
navigate(0);
SessionUser.remove();
SessionToken.remove();
window.location.reload();
};
return {
isAuthenticated,
session,
signIn,
signOut,
isLoading: isPending,
};
};
-3
View File
@@ -3,6 +3,3 @@ export * from './react-router';
export * from './tailwind-merge';
export * from './hooks';
export * from './local-storage';
export * from './cookies';
export * from './session';
export * from './constants';
+26 -1
View File
@@ -20,16 +20,41 @@ type TUserItem = {
email: string;
fullname: string;
gender: string;
identity_number: string;
is_active: boolean;
is_profile_completed: boolean;
phone_number: string;
referral_code: string;
referred_by: string;
religion: string;
student_type: string;
role: TRoleItem;
};
export const SessionUser = {
set: (val?: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
set: (val: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
get: (): TUserItem | undefined => {
const users = localStorage.getItem('users');
return users ? JSON.parse(users) : undefined;
},
remove: () => localStorage.removeItem('users'),
};
export const SessionToken = {
set: (val: { access_token: string; refresh_token: string }) => {
localStorage.setItem('access_token', val.access_token);
localStorage.setItem('refresh_token', val.refresh_token);
},
get: ():
| { access_token?: string | null; refresh_token?: string | null }
| undefined => {
return {
access_token: localStorage.getItem('access_token'),
refresh_token: localStorage.getItem('refresh_token'),
};
},
remove: () => {
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
},
};
@@ -1,22 +1,15 @@
import { lazy, LazyExoticComponent, ReactNode } from 'react';
import { lazy, LazyExoticComponent, ReactElement } from 'react';
import { ActionFunction, LoaderFunction, RouteObject } from 'react-router';
type TPermissionItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
};
interface PageModuleExports {
default: () => ReactNode;
default: () => ReactElement;
loader?: LoaderFunction;
action?: ActionFunction;
permissions?: Array<string>;
}
interface LoadingModuleExports {
default: () => ReactNode;
default: () => ReactElement;
}
interface RouteHandle {
@@ -45,6 +38,7 @@ export function convertPagesToRoute(
filePath,
loadingFiles
);
const route = createRoute({
PageComponent: page,
LoadingComponent: loadingComponent,
@@ -57,20 +51,6 @@ export function convertPagesToRoute(
const result = (await importer()) as PageModuleExports;
return 'loader' in result ? result.loader?.(args) : null;
},
async guard() {
const result = (await importer()) as PageModuleExports;
const localStoragePermission = localStorage.getItem('permissions');
const permissions: TPermissionItem[] | undefined =
localStoragePermission
? JSON.parse(localStoragePermission)
: undefined;
return 'permissions' in result
? result.permissions?.every(
(permission) =>
permissions?.some((item) => permission === item.name) || false
) || false
: true;
},
});
routes = mergeRoutes(routes, route);
});
@@ -82,14 +62,19 @@ function findMatchingLoadingComponent(
loadingFiles: Record<string, () => Promise<unknown>>
) {
const loadingPath = filePath.replace(/(page|layout)\.tsx$/, 'loading.tsx');
const groupMatch = filePath.match(/\([^/]+\//);
const groupLoadingPath = groupMatch ? `/${groupMatch[0]}loading.tsx` : null;
const globalLoadingPath = './app/loading.tsx';
const loader =
loadingFiles[loadingPath] ||
(groupLoadingPath && loadingFiles[groupLoadingPath]) ||
loadingFiles[globalLoadingPath];
if (!loader) return undefined;
return lazy(loader as () => Promise<LoadingModuleExports>);
}
@@ -101,110 +86,68 @@ function mergeRoutes(
throw new Error(
`Paths do not match: "${target.path}" and "${source.path}"`
);
target.children = target.children || [];
if (source.handle?.pageType === 'layout') {
return handleLayoutMerge(target, source);
}
if (source.handle?.pageType === 'page') {
return handlePageMerge(target, source);
}
if (source.children && source.children.length > 0) {
if (target.handle?.pageType === 'page') {
if (!target.children?.some((child) => child.index)) {
target.children = target.children || [];
target.children.unshift({
index: true,
element: target.element,
HydrateFallback: target.HydrateFallback,
action: target.action,
loader: target.loader,
handle: target.handle,
errorElement: target.errorElement,
});
}
delete target.element;
delete target.action;
delete target.loader;
delete target.handle;
}
mergeChildRoutes(target, source);
}
return target;
}
export function mergeChildRoutes(
target: ExtendedRouteObject,
source: ExtendedRouteObject
): void {
if (!source.children) return;
if (!target.children) {
target.children = [];
}
source.children.forEach((sourceChild) => {
const matchingChild = target.children!.find(
(targetChild) => targetChild.path === sourceChild.path
);
if (matchingChild) {
mergeRoutes(matchingChild, sourceChild);
} else {
target.children!.push(sourceChild);
if (source.handle?.pageType === 'layout') {
if (!target.element) {
target.element = source.element;
target.HydrateFallback = source.HydrateFallback;
target.action = source.action;
target.loader = source.loader;
target.handle = source.handle;
target.errorElement = source.errorElement;
target.children = target.children ?? [];
} else if (target.handle?.pageType === 'page') {
target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
}
});
}
return target;
}
export function handleLayoutMerge(
target: ExtendedRouteObject,
source: ExtendedRouteObject
): ExtendedRouteObject {
if (!target.element) {
Object.assign(target, {
if (
source.handle?.pageType === 'page' &&
!target.children.some((child) => child.index)
) {
target.children.unshift({
index: true,
element: source.element,
HydrateFallback: source.HydrateFallback,
action: source.action,
loader: source.loader,
handle: source.handle,
errorElement: source.errorElement,
});
} else if (target.handle?.pageType === 'page') {
target = swapTargetRouteAsIndexRouteAndUpdateWithRoute(target, source);
return target;
}
return target;
}
export function handlePageMerge(
target: ExtendedRouteObject,
source: ExtendedRouteObject
): ExtendedRouteObject {
if (!target.children) {
target.children = [];
}
if (
!target.children.some((child) => child.index) ||
target.handle?.pageType === 'layout'
target.handle?.pageType === 'layout' &&
source.handle?.pageType === 'page'
) {
if (target.handle?.pageType === 'layout') {
addRouteAsIndexRouteForTargetRoute(target, source);
} else {
target.children.unshift({
index: true,
element: source.element,
HydrateFallback: source.HydrateFallback,
action: source.action,
loader: source.loader,
handle: source.handle,
errorElement: source.errorElement,
});
}
target = addRouteAsIndexRouteForTargetRoute(target, source);
return target;
}
if (source.children) {
target.children = target.children ?? [];
source.children.forEach((sourceChild) => {
const matchingChild = target.children?.find(
(targetChild) => targetChild.path === sourceChild.path
);
if (matchingChild) mergeRoutes(matchingChild, sourceChild);
else target.children?.push(sourceChild);
});
}
return target;
}
export function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
target: ExtendedRouteObject,
layout: ExtendedRouteObject
route: ExtendedRouteObject
): ExtendedRouteObject {
target.children = target.children || [];
target.children = target.children ?? [];
target.children.push({
index: true,
element: target.element,
@@ -214,38 +157,38 @@ export function swapTargetRouteAsIndexRouteAndUpdateWithRoute(
handle: target.handle,
errorElement: target.errorElement,
});
Object.assign(target, {
element: layout.element,
HydrateFallback: layout.HydrateFallback,
action: layout.action,
loader: layout.loader,
handle: layout.handle,
errorElement: layout.errorElement,
});
target.element = route.element;
target.HydrateFallback = route.HydrateFallback;
target.action = route.action;
target.loader = route.loader;
target.handle = route.handle;
target.errorElement = route.errorElement;
return target;
}
export function addRouteAsIndexRouteForTargetRoute(
function addRouteAsIndexRouteForTargetRoute(
target: ExtendedRouteObject,
page: ExtendedRouteObject
route: ExtendedRouteObject
): ExtendedRouteObject {
target.children = target.children || [];
target.children = target.children ?? [];
target.children.push({
index: true,
element: page.element,
HydrateFallback: page.HydrateFallback,
action: page.action,
loader: page.loader,
handle: page.handle,
errorElement: page.errorElement,
element: route.element,
HydrateFallback: route.HydrateFallback,
action: route.action,
loader: route.loader,
handle: route.handle,
errorElement: route.errorElement,
});
return target;
}
function createRoute(args: {
segments: string[];
PageComponent: LazyExoticComponent<() => ReactNode>;
LoadingComponent?: LazyExoticComponent<() => ReactNode>;
PageComponent: LazyExoticComponent<() => ReactElement>;
LoadingComponent?: LazyExoticComponent<() => ReactElement>;
loader?: LoaderFunction;
action?: ActionFunction;
guard?: () => Promise<boolean>;
@@ -253,24 +196,21 @@ function createRoute(args: {
const [current, ...rest] = args.segments;
const [cleanPath, pageType] = current.split(separator);
const route: ExtendedRouteObject = { path: cleanPath };
if (pageType === 'page' || pageType === 'layout') {
route.element = <args.PageComponent />;
route.HydrateFallback =
args.LoadingComponent ?? (() => <div>Loading...</div>);
route.action = args.action;
route.loader = async (...props) => {
if (!(await args.guard?.())) {
throw new Response('Forbidden', {
status: 403,
statusText: 'Forbidden',
});
}
return args.loader?.(...props);
};
route.handle = { pageType: pageType as 'layout' | 'page' };
}
if (rest.length > 0) {
const nextSegment = rest[0].split(separator)[0];
if (nextSegment === 'update' || nextSegment === 'edit') {
return {
path: `${cleanPath}/${nextSegment}`,
@@ -281,16 +221,20 @@ function createRoute(args: {
handle: { pageType: pageType as 'layout' | 'page' },
};
}
const childRoute = createRoute({ ...args, segments: rest });
if (!route.children) {
route.children = [];
}
if (cleanPath.startsWith(':')) {
route.children.unshift(childRoute);
} else {
route.children.push(childRoute);
}
}
return route;
}
@@ -314,6 +258,7 @@ export function getRouteSegmentsFromFilePath(
if (segment.startsWith('[')) return getParamFromSegment(segment);
return segment;
});
return getRouteSegments(segments[0], segments, transformer);
}
@@ -361,7 +306,7 @@ export function addErrorElementToRoutes(
(_, prevSegment) => prevSegment
);
const ErrorBoundary = lazy(
importer as () => Promise<{ default: () => ReactNode }>
importer as () => Promise<{ default: () => ReactElement }>
);
setRoute(segments, routes, (route) => {
route.errorElement = <ErrorBoundary />;
@@ -380,7 +325,7 @@ export function add404PageToRoutesChildren(
(_, prevSegment) => prevSegment
);
const NotFound = lazy(
importer as () => Promise<{ default: () => ReactNode }>
importer as () => Promise<{ default: () => ReactElement }>
);
setRoute(segments, routes, (route) => {
if (route.children) {
@@ -395,7 +340,9 @@ export function add404PageToRoutesChildren(
action: tempRoute.action,
loader: tempRoute.loader,
});
route.children.push({ path: '*', element: <NotFound /> });
delete route.element;
delete route.action;
delete route.loader;
@@ -405,7 +352,7 @@ export function add404PageToRoutesChildren(
});
}
function set404NonPage(routes: RouteObject, notFoundElement: ReactNode) {
function set404NonPage(routes: RouteObject, notFoundElement: ReactElement) {
if (
routes.path &&
routes.children?.length &&
@@ -430,6 +377,7 @@ function setRoute(
segments.forEach((_segment, i) => {
const isLastSegment = i === segments.length - 1;
if (isLastSegment) return (temp = updater(temp));
if (!isLastSegment) {
const nextSegment = segments[i + 1];
const index = temp.children?.findIndex(
-27
View File
@@ -1,27 +0,0 @@
import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
import { useSession } from '../../hooks/use-session';
type TProps = PropsWithChildren<{
permissions: Array<string>;
fallback?: ReactNode;
}>;
export const Guard: FC<TProps> = (props): ReactNode => {
const { session } = useSession();
const permissionKeys = useMemo(() => {
return session?.user?.role?.permissions.map((perm) => perm.name) ?? [];
}, [session?.user?.role]);
const allowed = useMemo(() => {
return props.permissions.every((permission) =>
permissionKeys.includes(permission)
);
}, [permissionKeys, props.permissions]);
if (allowed) {
return props.children;
}
return props.fallback ?? null;
};
-1
View File
@@ -1 +0,0 @@
export * from './guard';
+1 -31
View File
@@ -38,8 +38,7 @@
"sharp": "^0.34.1",
"sonner": "^2.0.3",
"tailwind-merge": "^3.0.2",
"zod": "^3.24.2",
"zustand": "^5.0.5"
"zod": "^3.24.2"
},
"devDependencies": {
"@babel/core": "^7.14.5",
@@ -40388,35 +40387,6 @@
"url": "https://github.com/sponsors/colinhacks"
}
},
"node_modules/zustand": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
"integrity": "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==",
"license": "MIT",
"engines": {
"node": ">=12.20.0"
},
"peerDependencies": {
"@types/react": ">=18.0.0",
"immer": ">=9.0.6",
"react": ">=18.0.0",
"use-sync-external-store": ">=1.2.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
},
"use-sync-external-store": {
"optional": true
}
}
},
"node_modules/zwitch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+4 -5
View File
@@ -3,15 +3,15 @@
"version": "0.0.0",
"license": "MIT",
"scripts": {
"gacha:dev": "nx dev gacha",
"gacha:dev": "nx serve gacha",
"gacha:build": "nx build gacha",
"gacha:test": "nx test gacha",
"gacha:prod": "serve ./dist/apps/gacha",
"backoffice:dev": "nx dev backoffice",
"backoffice:dev": "nx serve backoffice",
"backoffice:build": "nx build backoffice",
"backoffice:test": "nx test backoffice",
"backoffice:prod": "serve ./dist/apps/backoffice",
"dimentorin:dev": "nx dev dimentorin",
"dimentorin:dev": "nx serve dimentorin",
"dimentorin:test": "nx test dimentorin",
"dimentorin:build": "nx build dimentorin",
"dimentorin:prod": "serve ./dist/apps/dimentorin",
@@ -55,8 +55,7 @@
"sharp": "^0.34.1",
"sonner": "^2.0.3",
"tailwind-merge": "^3.0.2",
"zod": "^3.24.2",
"zustand": "^5.0.5"
"zod": "^3.24.2"
},
"devDependencies": {
"@babel/core": "^7.14.5",
-8
View File
@@ -1,8 +0,0 @@
{
"routes": [
{
"src": "/[^.]+",
"dest": "/"
}
]
}