mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 05:22:02 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Rivaldi A N S
|
fa32995802 |
+69
-159
@@ -1,166 +1,76 @@
|
||||
stages:
|
||||
- build
|
||||
- deploy
|
||||
stages: [notify]
|
||||
|
||||
.build_template: &build_template
|
||||
stage: build
|
||||
image: node:20-alpine
|
||||
cache:
|
||||
key: npm-cache
|
||||
paths:
|
||||
- node_modules/
|
||||
variables:
|
||||
NPM_CONFIG_PRODUCTION: 'false'
|
||||
NODE_ENV: ''
|
||||
script:
|
||||
- echo "Installing dependencies..."
|
||||
- npm ci --no-audit --no-fund
|
||||
- echo "Build env used:"
|
||||
- echo "NEXT_PUBLIC_LTI_URL=$NEXT_PUBLIC_LTI_URL"
|
||||
- echo "NEXT_PUBLIC_SSO_LOGIN_URL=$NEXT_PUBLIC_SSO_LOGIN_URL"
|
||||
- echo "NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL"
|
||||
- echo "Building Next.js static export..."
|
||||
- npx next build
|
||||
- |
|
||||
mkdir -p out
|
||||
cat <<EOF > out/build-info.json
|
||||
{
|
||||
"commit": "$CI_COMMIT_SHORT_SHA",
|
||||
"pipeline": "$CI_PIPELINE_ID",
|
||||
"built_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
|
||||
"NEXT_PUBLIC_LTI_URL": "$NEXT_PUBLIC_LTI_URL",
|
||||
"NEXT_PUBLIC_SSO_LOGIN_URL": "$NEXT_PUBLIC_SSO_LOGIN_URL",
|
||||
"NEXT_PUBLIC_API_BASE_URL": "$NEXT_PUBLIC_API_BASE_URL"
|
||||
}
|
||||
EOF
|
||||
artifacts:
|
||||
name: 'out-$CI_COMMIT_SHORT_SHA'
|
||||
paths:
|
||||
- out/
|
||||
expire_in: 1 week
|
||||
|
||||
.deploy_template: &deploy_template
|
||||
stage: deploy
|
||||
image:
|
||||
name: amazon/aws-cli:latest
|
||||
entrypoint: ['/bin/sh', '-c']
|
||||
script:
|
||||
- set -e
|
||||
- aws --version
|
||||
- echo "Cleaning up newline characters in AWS credentials..."
|
||||
- export AWS_ACCESS_KEY_ID=$(echo $AWS_ACCESS_KEY_ID | tr -d '\r\n')
|
||||
- export AWS_SECRET_ACCESS_KEY=$(echo $AWS_SECRET_ACCESS_KEY | tr -d '\r\n')
|
||||
- echo "Deploying to s3://$S3_BUCKET in region $AWS_REGION"
|
||||
- aws s3api head-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" || aws s3api create-bucket --bucket "$S3_BUCKET" --region "$AWS_REGION" --create-bucket-configuration LocationConstraint="$AWS_REGION"
|
||||
- aws s3 sync ./out "s3://$S3_BUCKET" --delete --region "$AWS_REGION" --endpoint-url "https://s3.ap-southeast-3.amazonaws.com"
|
||||
|
||||
# CloudFront invalidation
|
||||
- |
|
||||
STATUS="success"
|
||||
if [ -n "$CLOUDFRONT_DISTRIBUTION_ID" ]; then
|
||||
echo "Invalidating CloudFront cache..."
|
||||
if ! aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID" --paths "/*"; then
|
||||
echo "CloudFront invalidation failed."
|
||||
STATUS="failed"
|
||||
fi
|
||||
else
|
||||
echo "No CloudFront distribution specified — skipping invalidation"
|
||||
fi
|
||||
|
||||
# Notifikasi Discord
|
||||
- |
|
||||
RUN_URL="${CI_PROJECT_URL}/-/pipelines/${CI_PIPELINE_ID}"
|
||||
|
||||
if [ "$CI_COMMIT_BRANCH" = "development" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-DEV"
|
||||
elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-PROD"
|
||||
else
|
||||
ENVIRONMENT_NAME="UNKNOWN"
|
||||
fi
|
||||
|
||||
if [ "$STATUS" = "success" ]; then
|
||||
COLOR=3066993
|
||||
TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
|
||||
DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` completed successfully."
|
||||
else
|
||||
COLOR=15158332
|
||||
TITLE="❌ Deployment ${ENVIRONMENT_NAME} Failed"
|
||||
DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
|
||||
fi
|
||||
|
||||
jq -n \
|
||||
--arg title "$TITLE" \
|
||||
--arg desc "$DESC" \
|
||||
--arg color "$COLOR" \
|
||||
--arg repo "$CI_PROJECT_PATH" \
|
||||
--arg actor "$GITLAB_USER_LOGIN" \
|
||||
--arg commit "$CI_COMMIT_SHA" \
|
||||
--arg run_url "$RUN_URL" \
|
||||
'{
|
||||
username: "CI Bot - LTI WEB",
|
||||
embeds: [{
|
||||
title: $title,
|
||||
description: $desc,
|
||||
color: ($color|tonumber),
|
||||
fields: [
|
||||
{name: "Repository", value: $repo, inline: true},
|
||||
{name: "Actor", value: $actor, inline: true},
|
||||
{name: "Commit", value: $commit, inline: false},
|
||||
{name: "Pipeline", value: ("[Open run](" + $run_url + ")"), inline: false}
|
||||
]
|
||||
}]
|
||||
}' > payload.json
|
||||
|
||||
curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
|
||||
|
||||
# ====== DEVELOPMENT (Branch development) ======
|
||||
build:dev:
|
||||
<<: *build_template
|
||||
# --- Notify when MR is opened/updated ---
|
||||
notify_discord_mr:
|
||||
stage: notify
|
||||
image: alpine:3.20
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == "development"'
|
||||
environment:
|
||||
name: development
|
||||
- if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
|
||||
variables:
|
||||
# NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
|
||||
# NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
|
||||
NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
|
||||
NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
|
||||
NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
|
||||
WEBHOOK_URL: $DISCORD_WEBHOOK_URL
|
||||
before_script:
|
||||
- apk add --no-cache curl jq
|
||||
script: |
|
||||
MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
|
||||
|
||||
deploy:dev:
|
||||
<<: *deploy_template
|
||||
needs: ['build:dev']
|
||||
jq -n \
|
||||
--arg repo "$CI_PROJECT_PATH" \
|
||||
--arg mr "#${CI_MERGE_REQUEST_IID}" \
|
||||
--arg url "$MR_URL" \
|
||||
--arg requestor "${GITLAB_USER_LOGIN:-$GITLAB_USER_NAME}" \
|
||||
--arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
|
||||
--arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
|
||||
--arg title "$CI_MERGE_REQUEST_TITLE" \
|
||||
'{
|
||||
username: "CI Bot - FE",
|
||||
embeds: [{
|
||||
title: "📣 [LTI WEB CLIENT] Merge Request Opened/Updated",
|
||||
description: ($mr + " in " + $repo),
|
||||
url: $url,
|
||||
color: 3447003,
|
||||
fields: [
|
||||
{name: "Author", value: $requestor, inline: true},
|
||||
{name: "Source → Target", value: ($source + " → " + $target), inline: true},
|
||||
{name: "Title", value: $title}
|
||||
]
|
||||
}]
|
||||
}' \
|
||||
| curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
|
||||
|
||||
# --- Notify when MR is merged ---
|
||||
notify_discord_merge:
|
||||
stage: notify
|
||||
image: alpine:3.20
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == "development"'
|
||||
# Only run for merge request pipelines that are in merged state
|
||||
- if: '$CI_PIPELINE_SOURCE == "merge_request_event" && $CI_MERGE_REQUEST_STATE == "merged"'
|
||||
variables:
|
||||
S3_BUCKET: 'dev-lti-erp.mbugroup.id'
|
||||
AWS_REGION: 'ap-southeast-3'
|
||||
CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
|
||||
environment:
|
||||
name: development
|
||||
url: https://dev-lti-erp.mbugroup.id
|
||||
|
||||
# ====== PRODUCTION ======
|
||||
# build:production:
|
||||
# <<: *build_template
|
||||
# rules:
|
||||
# # pilih salah satu: pakai branch master ATAU pakai tags rilis
|
||||
# - if: '$CI_COMMIT_BRANCH == "master"'
|
||||
# # - if: '$CI_COMMIT_TAG' # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
|
||||
# environment:
|
||||
# name: production
|
||||
|
||||
# deploy:production:
|
||||
# <<: *deploy_template
|
||||
# needs: ["build:production"]
|
||||
# rules:
|
||||
# - if: '$CI_COMMIT_BRANCH == "master"'
|
||||
# # - if: '$CI_COMMIT_TAG' # selaras dengan rule di build:production
|
||||
# variables:
|
||||
# S3_BUCKET: "lti-erp.mbugroup.id"
|
||||
# CLOUDFRONT_DISTRIBUTION_ID: "ddfd"
|
||||
# environment:
|
||||
# name: production
|
||||
|
||||
WEBHOOK_URL: $DISCORD_WEBHOOK_URL
|
||||
before_script:
|
||||
- apk add --no-cache curl jq
|
||||
script: |
|
||||
MR_URL="${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}"
|
||||
|
||||
jq -n \
|
||||
--arg repo "$CI_PROJECT_PATH" \
|
||||
--arg mr "#${CI_MERGE_REQUEST_IID}" \
|
||||
--arg url "$MR_URL" \
|
||||
--arg requestor "${CI_MERGE_REQUEST_AUTHOR}" \
|
||||
--arg source "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME" \
|
||||
--arg target "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" \
|
||||
--arg title "$CI_MERGE_REQUEST_TITLE" \
|
||||
'{
|
||||
username: "CI Bot - FE",
|
||||
embeds: [{
|
||||
title: "✅ [LTI WEB CLIENT] Merge Request Merged",
|
||||
description: ($mr + " has been merged into " + $repo),
|
||||
url: $url,
|
||||
color: 3066993,
|
||||
fields: [
|
||||
{name: "Author", value: $requestor, inline: true},
|
||||
{name: "Source → Target", value: ($source + " → " + $target), inline: true},
|
||||
{name: "Title", value: $title}
|
||||
]
|
||||
}]
|
||||
}' \
|
||||
| curl -sS -H "Content-Type: application/json" -d @- "$WEBHOOK_URL"
|
||||
|
||||
+1
-2
@@ -1,3 +1,2 @@
|
||||
npm run format
|
||||
npm run lint
|
||||
npm run build
|
||||
npm run build
|
||||
|
||||
-25
@@ -1,25 +0,0 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
RUN apk add --no-cache git bash build-base curl
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
|
||||
# Buat config agar Next tahu output: export
|
||||
RUN echo "const config = { output: 'export', images: { unoptimized: true } }; export default config;" > next.config.mjs
|
||||
|
||||
# Build project (Next.js 15 otomatis static export)
|
||||
RUN NEXT_DISABLE_TURBOPACK=1 npx next build
|
||||
|
||||
# Copy static assets dan hasil build agar bisa diakses
|
||||
RUN mkdir -p .next/server/app/_next && \
|
||||
cp -r .next/static .next/server/app/_next/static && \
|
||||
cp -r public/* .next/server/app/
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npx", "serve", ".next/server/app", "-l", "3000"]
|
||||
@@ -1,39 +0,0 @@
|
||||
version: '3.9'
|
||||
|
||||
services:
|
||||
dev-web-lti:
|
||||
container_name: dev-web-lti
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- '3002:3000'
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
NODE_ENV: production
|
||||
APP_ENV: production
|
||||
networks:
|
||||
- dev-lti-network
|
||||
restart: always
|
||||
deploy:
|
||||
resources:
|
||||
limits:
|
||||
cpus: '3.0'
|
||||
memory: 3G
|
||||
reservations:
|
||||
cpus: '1.0'
|
||||
memory: 512M
|
||||
extra_hosts:
|
||||
- 'host.docker.internal:host-gateway'
|
||||
# Optional: aktifkan healthcheck jika punya endpoint
|
||||
# healthcheck:
|
||||
# test: ["CMD-SHELL", "curl -fsS http://localhost:3000/api/healthz || exit 1"]
|
||||
# interval: 10s
|
||||
# timeout: 3s
|
||||
# retries: 10
|
||||
# start_period: 15s
|
||||
|
||||
networks:
|
||||
dev-lti-network:
|
||||
external: true
|
||||
+9
-9
@@ -1,6 +1,6 @@
|
||||
import { dirname } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { FlatCompat } from '@eslint/eslintrc';
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
@@ -10,14 +10,14 @@ const compat = new FlatCompat({
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends('next/core-web-vitals', 'next/typescript'),
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
{
|
||||
ignores: [
|
||||
'node_modules/**',
|
||||
'.next/**',
|
||||
'out/**',
|
||||
'build/**',
|
||||
'next-env.d.ts',
|
||||
"node_modules/**",
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Generated
+60
-643
File diff suppressed because it is too large
Load Diff
+5
-7
@@ -7,22 +7,19 @@
|
||||
"build": "next build --turbopack",
|
||||
"start": "next start",
|
||||
"lint": "eslint",
|
||||
"prepare": "husky",
|
||||
"format": "prettier --write ."
|
||||
"prepare": "husky"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-pdf/renderer": "^4.3.1",
|
||||
"@tanstack/match-sorter-utils": "^8.19.4",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"axios": "^1.12.2",
|
||||
"clsx": "^2.1.1",
|
||||
"formik": "^2.4.6",
|
||||
"inputmask": "^5.0.9",
|
||||
"moment": "^2.30.1",
|
||||
"next": "15.5.7",
|
||||
"next": "15.5.3",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "19.1.0",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-number-format": "^5.4.4",
|
||||
"react-select": "^5.10.2",
|
||||
@@ -36,6 +33,7 @@
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@iconify/react": "^6.0.2",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/inputmask": "^5.0.7",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
@@ -43,7 +41,7 @@
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.5.3",
|
||||
"husky": "^9.1.7",
|
||||
"prettier": "^3.6.2",
|
||||
"prettier": "3.6.2",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
const config = {
|
||||
plugins: ['@tailwindcss/postcss'],
|
||||
plugins: ["@tailwindcss/postcss"],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -1,11 +0,0 @@
|
||||
import ExpenseRequestForm from '@/components/pages/expense/form/ExpenseRequestForm';
|
||||
|
||||
const AddExpense = () => {
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
<ExpenseRequestForm />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddExpense;
|
||||
@@ -1,63 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ExpenseRequestForm from '@/components/pages/expense/form/ExpenseRequestForm';
|
||||
|
||||
import { ExpenseApi } from '@/services/api/expense';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ExpenseEditPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const expenseId = searchParams.get('expenseId');
|
||||
|
||||
const { data: expense, isLoading: isLoadingExpense } = useSWR(
|
||||
expenseId,
|
||||
(id: number) => ExpenseApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!expenseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingExpense && (!expense || isResponseError(expense))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
const isExpenseCanBeEdited =
|
||||
!isLoadingExpense &&
|
||||
isResponseSuccess(expense) &&
|
||||
expense.data.latest_approval.step_number !== 5 &&
|
||||
(expense.data.latest_approval.step_number === 1 ||
|
||||
expense.data.latest_approval.step_number === 2 ||
|
||||
expense.data.latest_approval.step_number === 3);
|
||||
|
||||
if (!isLoadingExpense && !isExpenseCanBeEdited) {
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingExpense && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingExpense && isResponseSuccess(expense) && (
|
||||
<ExpenseRequestForm type='edit' initialValues={expense.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseEditPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,50 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ExpenseDetail from '@/components/pages/expense/ExpenseDetail';
|
||||
|
||||
import { ExpenseApi } from '@/services/api/expense';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ExpenseDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const expenseId = searchParams.get('expenseId');
|
||||
|
||||
const { data: expense, isLoading: isLoadingExpense } = useSWR(
|
||||
expenseId,
|
||||
(id: number) => ExpenseApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!expenseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingExpense && (!expense || isResponseError(expense))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingExpense && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingExpense && isResponseSuccess(expense) && (
|
||||
<ExpenseDetail initialValues={expense.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseDetailPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import ExpensesTable from '@/components/pages/expense/ExpensesTable';
|
||||
|
||||
const Expense = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<ExpensesTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Expense;
|
||||
@@ -1,62 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
|
||||
|
||||
import { ExpenseApi } from '@/services/api/expense';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ExpenseRealizationEditPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const expenseId = searchParams.get('expenseId');
|
||||
|
||||
const { data: expense, isLoading: isLoadingExpense } = useSWR(
|
||||
expenseId,
|
||||
(id: number) => ExpenseApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!expenseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingExpense && (!expense || isResponseError(expense))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
const isExpenseRealizationCanBeEdited =
|
||||
!isLoadingExpense &&
|
||||
isResponseSuccess(expense) &&
|
||||
expense.data.latest_approval.action !== 'REJECTED' &&
|
||||
(expense.data.latest_approval.step_number === 4 ||
|
||||
expense.data.latest_approval.step_number === 5);
|
||||
|
||||
if (!isLoadingExpense && !isExpenseRealizationCanBeEdited) {
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingExpense && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingExpense && isResponseSuccess(expense) && (
|
||||
<ExpenseRealizationForm type='edit' initialValues={expense.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseRealizationEditPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,67 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ExpenseRealizationForm from '@/components/pages/expense/form/ExpenseRealizationForm';
|
||||
|
||||
import { ExpenseApi } from '@/services/api/expense';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ExpenseRealization = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const expenseId = searchParams.get('expenseId');
|
||||
|
||||
const { data: expense, isLoading: isLoadingExpense } = useSWR(
|
||||
expenseId,
|
||||
(id: number) => ExpenseApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!expenseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingExpense && (!expense || isResponseError(expense))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
const isExpenseCanBeRealized =
|
||||
isResponseSuccess(expense) &&
|
||||
expense.data.latest_approval.action !== 'REJECTED' &&
|
||||
expense.data.latest_approval.step_number === 3;
|
||||
|
||||
if (isResponseSuccess(expense) && !isExpenseCanBeRealized) {
|
||||
if (typeof window !== 'undefined') {
|
||||
router.back();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingExpense && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingExpense && isResponseSuccess(expense) && (
|
||||
<ExpenseRealizationForm initialValues={expense.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseRealization;
|
||||
+4
-7
@@ -3,10 +3,10 @@
|
||||
@import '../styles/daisyui.css';
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: 'lti';
|
||||
name: "lti";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
color-scheme: 'light';
|
||||
color-scheme: "light";
|
||||
--color-base-100: oklch(98% 0.001 106.423);
|
||||
--color-base-200: oklch(97% 0.001 106.424);
|
||||
--color-base-300: oklch(92% 0.003 48.717);
|
||||
@@ -37,6 +37,8 @@
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--color-primary: #1f74bf;
|
||||
}
|
||||
@@ -48,8 +50,3 @@
|
||||
html {
|
||||
scrollbar-gutter: initial;
|
||||
}
|
||||
|
||||
.react-select__menu-portal {
|
||||
position: relative;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
|
||||
import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
|
||||
|
||||
const CreateInventoryAdjustment = () => {
|
||||
return (
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<InventoryAdjustmentForm />
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<InventoryAdjustmentForm/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default CreateInventoryAdjustment;
|
||||
export default CreateInventoryAdjustment;
|
||||
@@ -1,11 +1,11 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
import SuspenseHelper from "@/components/helper/SuspenseHelper"
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
export default Layout;
|
||||
@@ -7,12 +7,11 @@ import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
|
||||
|
||||
const DetailInventoryAdjustment = () => {
|
||||
const router = useRouter();
|
||||
const [inventoryAdjustment, setInventoryAdjustment] =
|
||||
useState<InventoryAdjustment | null>(null);
|
||||
const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
|
||||
|
||||
// Ambil data dari router state
|
||||
useEffect(() => {
|
||||
console.log('Router State');
|
||||
console.log("Router State");
|
||||
console.log(window.history.state);
|
||||
const state = window.history.state?.usr as
|
||||
| { inventoryAdjustment?: InventoryAdjustment }
|
||||
@@ -25,20 +24,20 @@ const DetailInventoryAdjustment = () => {
|
||||
}, [router]);
|
||||
|
||||
const finalData = inventoryAdjustment;
|
||||
|
||||
console.log('Final Data');
|
||||
|
||||
console.log("Final Data");
|
||||
console.log(finalData);
|
||||
|
||||
if (!finalData) {
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<InventoryAdjustmentForm initialValues={finalData} />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,54 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditMarketingDelivery = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='add_deliver'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditMarketingDelivery;
|
||||
@@ -1,11 +0,0 @@
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
|
||||
const AddSalesOrder = () => {
|
||||
return (
|
||||
<div className='size-full p-4'>
|
||||
<MarketingForm formType='add' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddSalesOrder;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,62 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditMarketingDelivery = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
isResponseSuccess(marketing) &&
|
||||
marketing.data.latest_approval.step_number != 3
|
||||
) {
|
||||
toast.error('Data Marketing perlu dilakukan approval terlebih dahulu!');
|
||||
router.back();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='edit_deliver'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditMarketingDelivery;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,49 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingDetail from '@/components/pages/marketing/detail/MarketingDetail';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const DetailMarketing = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(soId, (id: number) => MarketingApi.getSingle(id));
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingDetail
|
||||
initialValues={marketing.data}
|
||||
refresh={refreshMarketing}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailMarketing;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,52 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditSalesOrder = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='edit'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditSalesOrder;
|
||||
@@ -1,10 +0,0 @@
|
||||
import MarketingTable from '@/components/pages/marketing/MarketingTable';
|
||||
|
||||
const Marketing = () => {
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
<MarketingTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Marketing;
|
||||
@@ -1,11 +1,11 @@
|
||||
import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
|
||||
import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
|
||||
|
||||
const AddCustomer = () => {
|
||||
return (
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<CustomerForm />
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<CustomerForm/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default AddCustomer;
|
||||
export default AddCustomer;
|
||||
@@ -1,47 +1,45 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
import { CustomerApi } from '@/services/api/master-data';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
|
||||
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||
import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
|
||||
|
||||
const CustomerDetail = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const costumerId = searchParams.get('customerId');
|
||||
const costumerId = searchParams.get("customerId");
|
||||
|
||||
const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
|
||||
costumerId,
|
||||
(id: number) => CustomerApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!costumerId) {
|
||||
if(!costumerId){
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
|
||||
router.replace('/404');
|
||||
if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
|
||||
router.replace("/404");
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingCostumer && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
<div className="w-full p-4 flex flex-row justify-center">
|
||||
{isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
|
||||
{!isLoadingCostumer && isResponseSuccess(costumer) && (
|
||||
<CustomerForm formType='detail' initialValues={costumer.data} />
|
||||
<CustomerForm formType="detail" initialValues={costumer.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
};
|
||||
|
||||
export default CustomerDetail;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import CustomersTable from '@/components/pages/master-data/customer/CustomersTable';
|
||||
import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
|
||||
|
||||
const Customer = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<section className="w-full p-4">
|
||||
<CustomersTable />
|
||||
</section>
|
||||
);
|
||||
)
|
||||
};
|
||||
|
||||
export default Customer;
|
||||
export default Customer;
|
||||
@@ -1,11 +1,11 @@
|
||||
import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
|
||||
import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
|
||||
|
||||
const AddFlock = () => {
|
||||
return (
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<FlockForm />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default AddFlock;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { FlockApi } from '@/services/api/master-data';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
|
||||
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||
import { FlockApi } from "@/services/api/master-data";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
|
||||
const FlockEdit = () => {
|
||||
const router = useRouter();
|
||||
@@ -44,6 +44,6 @@ const FlockEdit = () => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default FlockEdit;
|
||||
export default FlockEdit;
|
||||
@@ -1,11 +1,11 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
import SuspenseHelper from "@/components/helper/SuspenseHelper"
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
export default Layout;
|
||||
@@ -1,10 +1,10 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import FlockForm from '@/components/pages/master-data/flock/form/FlockForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { FlockApi } from '@/services/api/master-data';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
|
||||
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||
import { FlockApi } from "@/services/api/master-data";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
|
||||
const FlockDetail = () => {
|
||||
const router = useRouter();
|
||||
@@ -14,36 +14,33 @@ const FlockDetail = () => {
|
||||
const flockId = searchParams.get('flockId');
|
||||
|
||||
// Fetch Data
|
||||
const { data: flock, isLoading: isLoadingFlock } = useSWR(
|
||||
flockId,
|
||||
(id: number) => FlockApi.getSingle(id)
|
||||
);
|
||||
const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
|
||||
|
||||
if (!flockId) {
|
||||
if(!flockId){
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingFlock && (!flock || isResponseError(flock))) {
|
||||
if(!isLoadingFlock && (!flock || isResponseError(flock))){
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
<div className="w-full p-4 flex flex-row justify-center">
|
||||
{isLoadingFlock && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
)}
|
||||
{!isLoadingFlock && isResponseSuccess(flock) && (
|
||||
<FlockForm formType='detail' initialValues={flock.data} />
|
||||
<FlockForm formType="detail" initialValues={flock.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default FlockDetail;
|
||||
export default FlockDetail;
|
||||
@@ -1,11 +1,11 @@
|
||||
import FlockTable from '@/components/pages/master-data/flock/FlocksTable';
|
||||
import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
|
||||
|
||||
const Flock = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<FlockTable />
|
||||
<section className="w-full p-4">
|
||||
<FlockTable/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
);
|
||||
}
|
||||
|
||||
export default Flock;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
|
||||
import ProductCategoryForm from "@/components/pages/master-data/product-category/form/ProductCategoryForm";
|
||||
|
||||
const AddProductCategory = () => {
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
<div className="w-full p-4 flex flex-row justify-center">
|
||||
<ProductCategoryForm />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProductCategory;
|
||||
export default AddProductCategory;
|
||||
@@ -9,44 +9,39 @@ import { ProductCategoryApi } from '@/services/api/master-data';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ProductCategoryEdit = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const productCategoryId = searchParams.get('productCategoryId');
|
||||
const productCategoryId = searchParams.get('productCategoryId');
|
||||
|
||||
const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
|
||||
productCategoryId,
|
||||
(id: number) => ProductCategoryApi.getSingle(id)
|
||||
);
|
||||
const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
|
||||
productCategoryId,
|
||||
(id: number) => ProductCategoryApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!productCategoryId) {
|
||||
router.back();
|
||||
if (!productCategoryId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoadingProductCategory && isResponseSuccess(productCategory) && (
|
||||
<ProductCategoryForm type='edit' initialValues={productCategory.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
!isLoadingProductCategory &&
|
||||
(!productCategory || isResponseError(productCategory))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingProductCategory && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingProductCategory && isResponseSuccess(productCategory) && (
|
||||
<ProductCategoryForm type='edit' initialValues={productCategory.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductCategoryEdit;
|
||||
export default ProductCategoryEdit;
|
||||
@@ -29,24 +29,16 @@ const ProductCategoryDetail = () => {
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!isLoadingProductCategory &&
|
||||
(!productCategory || isResponseError(productCategory))
|
||||
) {
|
||||
if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingProductCategory && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{isLoadingProductCategory && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoadingProductCategory && isResponseSuccess(productCategory) && (
|
||||
<ProductCategoryForm
|
||||
type='detail'
|
||||
initialValues={productCategory.data}
|
||||
/>
|
||||
<ProductCategoryForm type='detail' initialValues={productCategory.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import ProductCategoryTable from '@/components/pages/master-data/product-category/ProductCategoryTable';
|
||||
import ProductCategoryTable from "@/components/pages/master-data/product-category/ProductCategoryTable";
|
||||
|
||||
const ProductCategory = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<section className="w-full p-4">
|
||||
<ProductCategoryTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductCategory;
|
||||
export default ProductCategory;
|
||||
@@ -2,10 +2,10 @@ import ProductForm from '@/components/pages/master-data/product/form/ProductForm
|
||||
|
||||
const AddProduct = () => {
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
<div className="w-full p-4 flex flex-row justify-center">
|
||||
<ProductForm />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProduct;
|
||||
export default AddProduct;
|
||||
@@ -13,8 +13,9 @@ const ProductEdit = () => {
|
||||
|
||||
const productId = searchParams.get('productId');
|
||||
|
||||
const { data: product, isLoading } = useSWR(productId, (id: number) =>
|
||||
ProductApi.getSingle(id)
|
||||
const { data: product, isLoading } = useSWR(
|
||||
productId,
|
||||
(id: number) => ProductApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!productId) {
|
||||
@@ -41,4 +42,4 @@ const ProductEdit = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductEdit;
|
||||
export default ProductEdit;
|
||||
@@ -13,8 +13,9 @@ const ProductDetail = () => {
|
||||
|
||||
const productId = searchParams.get('productId');
|
||||
|
||||
const { data: product, isLoading } = useSWR(productId, (id: number) =>
|
||||
ProductApi.getSingle(id)
|
||||
const { data: product, isLoading } = useSWR(
|
||||
productId,
|
||||
(id: number) => ProductApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!productId) {
|
||||
@@ -41,4 +42,4 @@ const ProductDetail = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductDetail;
|
||||
export default ProductDetail;
|
||||
@@ -1,11 +1,11 @@
|
||||
import ProductsTable from '@/components/pages/master-data/product/ProductTable';
|
||||
import ProductsTable from "@/components/pages/master-data/product/ProductTable";
|
||||
|
||||
const Product = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<ProductsTable />
|
||||
<section className="w-full p-4">
|
||||
<ProductsTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Product;
|
||||
export default Product;
|
||||
@@ -8,4 +8,4 @@ const AddSupplier = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AddSupplier;
|
||||
export default AddSupplier;
|
||||
@@ -46,4 +46,4 @@ const SupplierDetail = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SupplierDetail;
|
||||
export default SupplierDetail;
|
||||
@@ -1,4 +1,4 @@
|
||||
import SuppliersTable from '@/components/pages/master-data/supplier/SupplierTable';
|
||||
import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
|
||||
|
||||
const Supplier = () => {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import SuspenseHelper from "@/components/helper/SuspenseHelper"
|
||||
|
||||
const Layout = ({
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,270 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { ProjectFlockApi } from '@/services/api/production';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import useSWR from 'swr';
|
||||
|
||||
const AddChickin = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
|
||||
// Tables Props
|
||||
const { state: tableFilterState } = useTableFilter({
|
||||
initial: { search: '' },
|
||||
paramMap: { page: 'page', pageSize: 'limit' },
|
||||
});
|
||||
|
||||
// States
|
||||
const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
|
||||
undefined
|
||||
);
|
||||
const [projectFlockKandang, setProjectFlockKandang] =
|
||||
useState<BaseApiResponse<ProjectFlockKandang>>();
|
||||
const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
|
||||
useState(false);
|
||||
const [searchProjectFlock, setSearchProjectFlock] = useState('');
|
||||
|
||||
// Fetch Data
|
||||
const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
|
||||
projectFlockId,
|
||||
(id: number) => ProjectFlockApi.getSingle(id)
|
||||
);
|
||||
const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
|
||||
useSWR(
|
||||
`${ProjectFlockApi.basePath}?${new URLSearchParams({
|
||||
search: searchProjectFlock,
|
||||
}).toString()}`,
|
||||
ProjectFlockApi.getAllFetcher
|
||||
);
|
||||
|
||||
const getProjectFlockKandangUrl = `/kandangs/lookup`;
|
||||
// Mapping Options
|
||||
const options = isResponseSuccess(listProjectFlock)
|
||||
? listProjectFlock?.data.map((projectFlock) => {
|
||||
return {
|
||||
value: projectFlock.id,
|
||||
label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
|
||||
const chickinModal = useModal();
|
||||
const alertModal = useModal();
|
||||
|
||||
if (!projectFlockId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!isLoadingProjectFlock &&
|
||||
(!projectFlock || isResponseError(projectFlock))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle Function
|
||||
const handleChickinClick = async (kandang: Kandang) => {
|
||||
setIsLoadingProjectFlockKandang(true);
|
||||
setSelectedKandang(kandang);
|
||||
const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
|
||||
BaseApiResponse<ProjectFlockKandang>,
|
||||
'GET'
|
||||
>(getProjectFlockKandangUrl, {
|
||||
method: 'GET',
|
||||
params: {
|
||||
project_flock_id: projectFlockId ?? 0,
|
||||
kandang_id: kandang.id,
|
||||
},
|
||||
});
|
||||
if (isResponseSuccess(ProjectFlockKandangRes)) {
|
||||
setProjectFlockKandang(ProjectFlockKandangRes);
|
||||
setIsLoadingProjectFlockKandang(false);
|
||||
if (
|
||||
ProjectFlockKandangRes.data.available_quantity &&
|
||||
ProjectFlockKandangRes.data.available_quantity > 0
|
||||
) {
|
||||
chickinModal.openModal();
|
||||
} else {
|
||||
alertModal.openModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleAfterSubmit = () => {
|
||||
chickinModal.closeModal();
|
||||
router.push('/production/chickin');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isResponseSuccess(projectFlock) && (
|
||||
<>
|
||||
<section className='w-full p-4'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/production/project-flock'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<div className='flex flex-col gap-4 w-full my-4'>
|
||||
<div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
|
||||
<SelectInput
|
||||
required
|
||||
isSearchable
|
||||
label='Project Flock'
|
||||
options={options}
|
||||
isLoading={isLoadingListProjectFlock}
|
||||
value={{
|
||||
label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
|
||||
value: projectFlock.data?.id,
|
||||
}}
|
||||
onChange={(val) =>
|
||||
router.push(
|
||||
`/production/chickin/add?projectFlockId=${
|
||||
(val as OptionType | null)?.value
|
||||
}`
|
||||
)
|
||||
}
|
||||
onInputChange={(val) => {
|
||||
setSearchProjectFlock(val);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Table<Kandang>
|
||||
data={projectFlock.data?.kandangs}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Nama Kandang',
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={() => {
|
||||
handleChickinClick(props.row.original);
|
||||
}}
|
||||
disabled={isLoadingProjectFlockKandang}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:home-import-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Chickin
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(projectFlock) &&
|
||||
projectFlock.data?.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
<Modal ref={chickinModal.ref}>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<h1 className='text-xl font-semibold text-center mb-6'>
|
||||
Chickin Kandang - {selectedKandang?.name}
|
||||
</h1>
|
||||
<Button
|
||||
color='error'
|
||||
variant='link'
|
||||
onClick={chickinModal.closeModal}
|
||||
>
|
||||
<Icon
|
||||
className='text-black'
|
||||
icon='uil:times'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
{isResponseSuccess(projectFlockKandang) &&
|
||||
!isLoadingProjectFlockKandang && (
|
||||
<ChickinForm
|
||||
initialValues={{
|
||||
project_flock_kandang: projectFlockKandang.data,
|
||||
created_user: projectFlock.data?.created_user,
|
||||
created_at: projectFlock.data?.created_at,
|
||||
updated_at: projectFlock.data?.updated_at,
|
||||
approval: projectFlock.data?.approval,
|
||||
}}
|
||||
afterSubmit={handleAfterSubmit}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
<ConfirmationModal
|
||||
ref={alertModal.ref}
|
||||
type='info'
|
||||
text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
|
||||
secondaryButton={undefined}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'info',
|
||||
onClick: () => {
|
||||
alertModal.closeModal();
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddChickin;
|
||||
@@ -0,0 +1,11 @@
|
||||
import SuspenseHelper from "@/components/helper/SuspenseHelper"
|
||||
|
||||
const Layout = ({
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,351 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ChickinApi } from '@/services/api/production';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import {
|
||||
Chickin,
|
||||
ChickinApprovalPayload,
|
||||
} from '@/types/api/production/chickin';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
/**
|
||||
* TODO: Refactor code - pindahin detail ke reuseable component
|
||||
* setelah implement approval and reject
|
||||
*/
|
||||
|
||||
const DetailChickin = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const chickinId = searchParams.get('chickinId');
|
||||
const [isApproveLoading, setIsApproveLoading] = useState(false);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const confirmModal = useModal();
|
||||
const deleteModal = useModal();
|
||||
const chickinModal = useModal();
|
||||
const {
|
||||
data: chickin,
|
||||
isLoading,
|
||||
mutate: refreshChickin,
|
||||
} = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
|
||||
|
||||
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
|
||||
// chickin.data?.approval.step_number == 1 ? false : true
|
||||
true
|
||||
);
|
||||
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
|
||||
!isApprovedDisabled
|
||||
);
|
||||
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
|
||||
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
|
||||
);
|
||||
|
||||
if (!chickinId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!chickin || isResponseError(chickin))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isResponseSuccess(chickin)) {
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const confirmationModalClickHandler = async ({
|
||||
action = 'APPROVED',
|
||||
}: {
|
||||
action: 'APPROVED' | 'REJECTED';
|
||||
}) => {
|
||||
if (chickin?.data.id === undefined) return;
|
||||
setIsApproveLoading(true);
|
||||
const approveChickinRes = await ChickinApi.customRequest<
|
||||
BaseApiResponse<Chickin>,
|
||||
ChickinApprovalPayload
|
||||
>(`/approvals`, {
|
||||
method: 'POST',
|
||||
payload: {
|
||||
action: action,
|
||||
approvable_ids: [chickin.data.id],
|
||||
},
|
||||
});
|
||||
|
||||
if (isResponseSuccess(approveChickinRes)) {
|
||||
if (refreshChickin) {
|
||||
await refreshChickin();
|
||||
}
|
||||
toast.success(approveChickinRes.message as string);
|
||||
}
|
||||
if (isResponseError(approveChickinRes)) {
|
||||
toast.error(approveChickinRes?.message as string);
|
||||
}
|
||||
confirmModal.closeModal();
|
||||
setIsApproveLoading(false);
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
const deleteProjectFlockRes = await ChickinApi.delete(
|
||||
chickin.data?.id as number
|
||||
);
|
||||
|
||||
if (isResponseSuccess(deleteProjectFlockRes)) {
|
||||
toast.success(deleteProjectFlockRes?.message as string);
|
||||
router.push('/production/chickin');
|
||||
}
|
||||
if (isResponseError(deleteProjectFlockRes)) {
|
||||
toast.error(deleteProjectFlockRes?.message as string);
|
||||
}
|
||||
deleteModal.closeModal();
|
||||
setIsDeleteLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-4 flex flex-col justify-center gap-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(chickin) && (
|
||||
<>
|
||||
{/* <div className='w-full flex flex-col sm:flex-row gap-2'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={(() => {
|
||||
if (chickin?.data.id) {
|
||||
setApprovalAction('APPROVED');
|
||||
confirmModal.openModal();
|
||||
}
|
||||
})}
|
||||
disabled={!chickin?.data.id || isApprovedDisabled}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='material-symbols:check' width={24} height={24} />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='error'
|
||||
onClick={() => {
|
||||
if (chickin?.data.id) {
|
||||
setApprovalAction('REJECTED');
|
||||
confirmModal.openModal();
|
||||
}
|
||||
}}
|
||||
disabled={!chickin?.data.id || isRejectedDisabled}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='mdi:times' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
</div> */}
|
||||
<Card
|
||||
title='Informasi Umum'
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-2 gap-4 mt-4'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Flock</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.flock
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Area</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.area
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Kategori</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.project_flock.category}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Lokasi</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.location
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Periode</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.project_flock.period}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Kandang</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.kandang.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card
|
||||
title='Detail Chickin'
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-2 gap-4 mt-4'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Flock Kandang</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.flock
|
||||
.name
|
||||
}{' '}
|
||||
- {chickin.data.project_flock_kandang?.kandang.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Tanggal Chickin</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.chick_in_date
|
||||
? new Date(chickin.data.chick_in_date).toLocaleDateString(
|
||||
'id-ID'
|
||||
)
|
||||
: '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Jumlah (Ekor)</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.quantity?.toLocaleString('id-ID')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Catatan</div>
|
||||
<div className='text-sm'>{chickin.data.note}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className='w-full flex flex-col sm:flex-row gap-2'>
|
||||
<Button
|
||||
color='error'
|
||||
onClick={() => {
|
||||
deleteModal.openModal();
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:times' width={24} height={24} />
|
||||
Delete
|
||||
</Button>
|
||||
<Button color='warning'
|
||||
onClick={() => {
|
||||
chickinModal.openModal();
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal ref={chickinModal.ref}>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<h1 className='text-xl font-semibold text-center mb-6'>
|
||||
Chickin Kandang -{' '}
|
||||
{chickin?.data?.project_flock_kandang &&
|
||||
chickin?.data?.project_flock_kandang.kandang?.name}
|
||||
</h1>
|
||||
<Button
|
||||
color='error'
|
||||
variant='link'
|
||||
onClick={chickinModal.closeModal}
|
||||
>
|
||||
<Icon
|
||||
className='text-black'
|
||||
icon='uil:times'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<ChickinForm
|
||||
initialValues={chickin?.data}
|
||||
formType='edit'
|
||||
afterSubmit={() => {
|
||||
refreshChickin();
|
||||
chickinModal.closeModal();
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={confirmModal.ref}
|
||||
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
|
||||
text={`Apakah anda yakin ingin ${
|
||||
approvalAction == 'APPROVED' ? 'approve' : 'reject'
|
||||
} chickin berikut? (${
|
||||
chickin?.data.project_flock_kandang?.project_flock.flock.name
|
||||
} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: approvalAction == 'APPROVED' ? 'success' : 'error',
|
||||
isLoading: isApproveLoading,
|
||||
onClick: () => {
|
||||
confirmationModalClickHandler({
|
||||
action: approvalAction,
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailChickin;
|
||||
@@ -0,0 +1,10 @@
|
||||
import ChickinTable from "@/components/pages/production/chickin/ChickinTable";
|
||||
|
||||
const Chickin = () => {
|
||||
return (
|
||||
<section className="w-full p-4">
|
||||
<ChickinTable/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
export default Chickin;
|
||||
@@ -1,13 +1,13 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
|
||||
import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
|
||||
|
||||
const AddProjectFlock = () => {
|
||||
return (
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<ProjectFlockForm formType='add' />
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<ProjectFlockForm formType="add"/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default AddProjectFlock;
|
||||
export default AddProjectFlock;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,60 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
export default function AddChickinKandang() {
|
||||
const searchParams = useSearchParams();
|
||||
const projectFlockKandangId = searchParams.get('projectFlockKandangId');
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
data: projectFlockKandang,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshProjectFlockKandang,
|
||||
} = useSWR(
|
||||
`get-single-project-flock-kandang/${projectFlockKandangId}`,
|
||||
async () =>
|
||||
ProjectFlockKandangApi.getSingle(
|
||||
parseInt(projectFlockKandangId as string)
|
||||
)
|
||||
);
|
||||
|
||||
if (!projectFlockKandangId) {
|
||||
router.push(`/production/chickin/add?projectFlockId=${projectFlockId}`);
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && !projectFlockKandang) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
const handleAfterSubmit = () => {
|
||||
refreshProjectFlockKandang();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading &&
|
||||
isResponseSuccess(projectFlockKandang) &&
|
||||
projectFlockId && (
|
||||
<ChickinForm
|
||||
initialValues={projectFlockKandang.data}
|
||||
afterSubmit={handleAfterSubmit}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,20 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
const AddChickin = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full p-4'>
|
||||
<ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddChickin;
|
||||
@@ -1,10 +0,0 @@
|
||||
import ChickinTable from '@/components/pages/production/chickin/ChickinTable';
|
||||
|
||||
const Chickin = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<ChickinTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
export default Chickin;
|
||||
@@ -1,51 +1,46 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
|
||||
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||
import { ProjectFlockApi } from "@/services/api/production";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
|
||||
const ProjectFlockEdit = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
const projectFlockId = searchParams.get("projectFlockId");
|
||||
|
||||
const {
|
||||
data: projectFlock,
|
||||
isLoading: isLoadingProjectFlock,
|
||||
mutate: refreshProjectFlocks,
|
||||
} = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
|
||||
const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
|
||||
projectFlockId,
|
||||
(id: number) => ProjectFlockApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!projectFlockId) {
|
||||
if(!projectFlockId){
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!isLoadingProjectFlock &&
|
||||
(!projectFlock || isResponseError(projectFlock))
|
||||
) {
|
||||
router.replace('/404');
|
||||
if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
|
||||
router.replace("/404");
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-col justify-center'>
|
||||
{isLoadingProjectFlock && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockForm formType='edit' initialValues={projectFlock.data} />
|
||||
<div className="w-full p-4 flex flex-row justify-center">
|
||||
{isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
|
||||
{!isLoadingCostumer && isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockForm formType="edit" initialValues={projectFlock.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectFlockEdit;
|
||||
export default ProjectFlockEdit;
|
||||
@@ -1,11 +1,11 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
import SuspenseHelper from "@/components/helper/SuspenseHelper"
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
export default Layout;
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { ProjectFlockApi } from '@/services/api/production';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
@@ -37,16 +37,12 @@ const ProjectFlockDetail = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-col justify-center'>
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingProjectFlock && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockForm
|
||||
formType='detail'
|
||||
initialValues={projectFlock.data}
|
||||
refreshProjectFlocks={refreshProjectFlock}
|
||||
/>
|
||||
{!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
|
||||
import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
|
||||
|
||||
const ProjectFlock = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<ProjectFlockTable />
|
||||
<section className="w-full p-4">
|
||||
<ProjectFlockTable/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default ProjectFlock;
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,49 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const AddGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const recordingId = searchParams.get('recording_id');
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId && recordingId !== 'new' ? [recordingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (
|
||||
recordingId &&
|
||||
recordingId !== 'new' &&
|
||||
!isLoadingRecording &&
|
||||
(!recording || !isResponseSuccess(recording))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{recordingId && recordingId !== 'new' && isLoadingRecording && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{(!recordingId ||
|
||||
recordingId === 'new' ||
|
||||
(!isLoadingRecording && recording && isResponseSuccess(recording))) && (
|
||||
<GradingForm
|
||||
type='add'
|
||||
initialValues={
|
||||
isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddGrading;
|
||||
@@ -1,53 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const EditGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const recordingId = searchParams.get('recordingId');
|
||||
const gradingId = searchParams.get('gradingId');
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId ? [recordingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (!recordingId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingRecording && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingRecording && recording && isResponseSuccess(recording) && (
|
||||
<GradingForm
|
||||
type='edit'
|
||||
initialValues={recording.data.eggs?.find(
|
||||
(egg) => egg.id === parseInt(gradingId || '0')
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditGrading;
|
||||
@@ -1,52 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const DetailGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const gradingId = searchParams.get('gradingId');
|
||||
|
||||
const { data: grading, isLoading: isLoadingGrading } = useSWR(
|
||||
gradingId ? [gradingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (!gradingId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingGrading && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingGrading && grading && isResponseSuccess(grading) && (
|
||||
<GradingForm
|
||||
type='detail'
|
||||
initialValues={grading.data.eggs?.find(
|
||||
(egg) => egg.id === parseInt(gradingId)
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailGrading;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -8,6 +8,91 @@ import TransferToLayingForm from '@/components/pages/production/transfer-to-layi
|
||||
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
|
||||
|
||||
// TODO: delete dummy data
|
||||
const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
|
||||
id: 1,
|
||||
transfer_date: '2025-10-14',
|
||||
flock_source: {
|
||||
id: 1,
|
||||
name: 'Flock asal test',
|
||||
},
|
||||
flock_destination: {
|
||||
id: 2,
|
||||
name: 'Flock tujuan destination',
|
||||
},
|
||||
quantity: 10,
|
||||
kandangs: [
|
||||
{
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Kandang test',
|
||||
status: 'ACTIVE',
|
||||
location: {
|
||||
id: 1,
|
||||
name: 'test location',
|
||||
address: 'test address 1',
|
||||
area: { id: 1, name: 'test area 1' },
|
||||
},
|
||||
pic: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
},
|
||||
quantity: 8,
|
||||
},
|
||||
{
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Kandang test 2',
|
||||
status: 'ACTIVE',
|
||||
location: {
|
||||
id: 1,
|
||||
name: 'test location',
|
||||
address: 'test address 1',
|
||||
area: { id: 1, name: 'test area 1' },
|
||||
},
|
||||
pic: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
},
|
||||
quantity: 2,
|
||||
},
|
||||
],
|
||||
reason: 'Test alasan',
|
||||
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
};
|
||||
|
||||
const TransferToLayingEdit = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -29,33 +114,33 @@ const TransferToLayingEdit = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: remove dummy data and integrate with real API
|
||||
if (
|
||||
!isLoadingTransferToLaying &&
|
||||
(!transferToLaying || isResponseError(transferToLaying))
|
||||
(!transferToLaying ||
|
||||
(isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
isResponseSuccess(transferToLaying) &&
|
||||
transferToLaying.data.approval.step_number === 2
|
||||
) {
|
||||
router.replace('/production/transfer-to-laying');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingTransferToLaying && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
|
||||
{/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
|
||||
<TransferToLayingForm
|
||||
type='edit'
|
||||
type='detail'
|
||||
initialValues={transferToLaying.data}
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{/* TODO: remove this dummy data and integrate to real API */}
|
||||
<TransferToLayingForm
|
||||
type='edit'
|
||||
initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,6 +8,91 @@ import TransferToLayingForm from '@/components/pages/production/transfer-to-layi
|
||||
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
|
||||
|
||||
// TODO: delete dummy data
|
||||
const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
|
||||
id: 1,
|
||||
transfer_date: '2025-10-14',
|
||||
flock_source: {
|
||||
id: 1,
|
||||
name: 'Flock asal test',
|
||||
},
|
||||
flock_destination: {
|
||||
id: 2,
|
||||
name: 'Flock tujuan destination',
|
||||
},
|
||||
quantity: 10,
|
||||
kandangs: [
|
||||
{
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Kandang test',
|
||||
status: 'ACTIVE',
|
||||
location: {
|
||||
id: 1,
|
||||
name: 'test location',
|
||||
address: 'test address 1',
|
||||
area: { id: 1, name: 'test area 1' },
|
||||
},
|
||||
pic: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
},
|
||||
quantity: 8,
|
||||
},
|
||||
{
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Kandang test 2',
|
||||
status: 'ACTIVE',
|
||||
location: {
|
||||
id: 1,
|
||||
name: 'test location',
|
||||
address: 'test address 1',
|
||||
area: { id: 1, name: 'test area 1' },
|
||||
},
|
||||
pic: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
},
|
||||
quantity: 2,
|
||||
},
|
||||
],
|
||||
reason: 'Test alasan',
|
||||
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 2,
|
||||
email: 'test@gmail.com',
|
||||
name: 'test',
|
||||
},
|
||||
created_at: '14-10-2025',
|
||||
updated_at: '14-10-2025',
|
||||
};
|
||||
|
||||
const TransferToLayingDetail = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
@@ -29,9 +114,11 @@ const TransferToLayingDetail = () => {
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: remove dummy data and integrate with real API
|
||||
if (
|
||||
!isLoadingTransferToLaying &&
|
||||
(!transferToLaying || isResponseError(transferToLaying))
|
||||
(!transferToLaying ||
|
||||
(isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
@@ -42,13 +129,18 @@ const TransferToLayingDetail = () => {
|
||||
{isLoadingTransferToLaying && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
|
||||
{/* {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
|
||||
<TransferToLayingForm
|
||||
type='detail'
|
||||
initialValues={transferToLaying.data}
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
{/* TODO: remove this dummy data and integrate to real API */}
|
||||
<TransferToLayingForm
|
||||
type='detail'
|
||||
initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
|
||||
|
||||
const AddPurchaseRequest = () => {
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
<PurchaseRequestForm />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddPurchaseRequest;
|
||||
@@ -1,47 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import PurchaseRequestForm from '@/components/pages/purchase/form/request/PurchaseRequestForm';
|
||||
import { PurchaseApi } from '@/services/api/purchase';
|
||||
import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
|
||||
|
||||
const PurchaseEdit = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const purchaseId = searchParams.get('purchaseId');
|
||||
|
||||
const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
|
||||
purchaseId,
|
||||
(id: number) => PurchaseApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!purchaseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingPurchase && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingPurchase && isResponseSuccess(purchase) && (
|
||||
<PurchaseRequestForm type='edit' initialValues={purchase.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseEdit;
|
||||
@@ -1,54 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import PurchaseOrderDetail from '@/components/pages/purchase/order/PurchaseOrderDetail';
|
||||
import { PurchaseApi } from '@/services/api/purchase';
|
||||
import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
|
||||
|
||||
const PurchaseDetail = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const purchaseId = searchParams.get('purchaseId');
|
||||
|
||||
const {
|
||||
data: purchase,
|
||||
isLoading: isLoadingPurchase,
|
||||
mutate: mutatePurchase,
|
||||
} = useSWR(purchaseId, (id: number) => PurchaseApi.getSingle(id));
|
||||
|
||||
if (!purchaseId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingPurchase && (!purchase || isResponseError(purchase))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoadingPurchase && (
|
||||
<div className='w-full flex flex-row justify-center items-center'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
)}
|
||||
{!isLoadingPurchase && isResponseSuccess(purchase) && (
|
||||
<PurchaseOrderDetail
|
||||
type='detail'
|
||||
initialValues={purchase.data}
|
||||
refetchData={mutatePurchase}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseDetail;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,11 +0,0 @@
|
||||
import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
|
||||
|
||||
const Purchase = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<PurchaseTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Purchase;
|
||||
@@ -3,7 +3,7 @@ import Link from 'next/link';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
export interface ButtonProps extends react.ComponentProps<'button'> {
|
||||
interface ButtonProps extends react.ComponentProps<'button'> {
|
||||
variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
|
||||
color?: Color;
|
||||
href?: string;
|
||||
|
||||
+47
-139
@@ -1,25 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { HTMLAttributes, ReactNode, useState } from 'react';
|
||||
import {
|
||||
HTMLAttributes,
|
||||
ReactNode,
|
||||
} from 'react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import Image from 'next/image';
|
||||
import Collapse from './Collapse';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
export interface CardProps
|
||||
extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
||||
export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
image?: string;
|
||||
imageAlt?: string;
|
||||
imageWidth?: number;
|
||||
imageHeight?: number;
|
||||
actions?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
collapsible?: boolean;
|
||||
defaultCollapsed?: boolean;
|
||||
onCollapsedChange?: (collapsed: boolean) => void;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
image?: string;
|
||||
@@ -28,7 +23,6 @@ export interface CardProps
|
||||
subtitle?: string;
|
||||
actions?: string;
|
||||
footer?: string;
|
||||
collapsible?: string;
|
||||
};
|
||||
variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
@@ -39,42 +33,29 @@ const Card = ({
|
||||
subtitle,
|
||||
image,
|
||||
imageAlt,
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
actions,
|
||||
footer,
|
||||
collapsible,
|
||||
defaultCollapsed = false,
|
||||
onCollapsedChange,
|
||||
className,
|
||||
variant = 'default',
|
||||
size = 'md',
|
||||
children,
|
||||
...props
|
||||
}: CardProps) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
||||
|
||||
const handleCollapsedChange = (open: boolean) => {
|
||||
const collapsed = !open;
|
||||
setIsCollapsed(collapsed);
|
||||
onCollapsedChange?.(collapsed);
|
||||
};
|
||||
|
||||
const getCardClasses = () => {
|
||||
const baseClasses = 'card bg-base-100';
|
||||
|
||||
const variantClasses = {
|
||||
default: '',
|
||||
compact: 'card-compact',
|
||||
bordered: 'border border-base-300',
|
||||
shadow: 'shadow-xl',
|
||||
'default': '',
|
||||
'compact': 'card-compact',
|
||||
'bordered': 'border border-base-300',
|
||||
'shadow': 'shadow-xl',
|
||||
'image-full': 'card-side card-compact shadow-xl',
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'w-64',
|
||||
md: 'w-96',
|
||||
lg: 'w-[28rem]',
|
||||
'sm': 'w-64',
|
||||
'md': 'w-96',
|
||||
'lg': 'w-[28rem]',
|
||||
};
|
||||
|
||||
return cn(
|
||||
@@ -85,31 +66,11 @@ const Card = ({
|
||||
);
|
||||
};
|
||||
|
||||
const getImageDimensions = () => {
|
||||
if (variant === 'image-full') {
|
||||
return {
|
||||
width: imageWidth || 128,
|
||||
height: imageHeight || 128,
|
||||
};
|
||||
}
|
||||
|
||||
const cardWidths = {
|
||||
sm: 256, // w-64
|
||||
md: 384, // w-96
|
||||
lg: 448, // w-[28rem]
|
||||
};
|
||||
|
||||
return {
|
||||
width: imageWidth || cardWidths[size],
|
||||
height: imageHeight || 192,
|
||||
};
|
||||
};
|
||||
|
||||
const getImageClasses = () => {
|
||||
if (variant === 'image-full') {
|
||||
return cn('object-cover', className?.image);
|
||||
return cn('w-32 h-32 object-cover', className?.image);
|
||||
}
|
||||
return cn('w-full object-cover', className?.image);
|
||||
return cn('h-48 object-cover', className?.image);
|
||||
};
|
||||
|
||||
const getBodyClasses = () => {
|
||||
@@ -124,9 +85,9 @@ const Card = ({
|
||||
|
||||
const getTitleClasses = () => {
|
||||
const sizeClasses = {
|
||||
sm: 'text-lg',
|
||||
md: 'text-xl',
|
||||
lg: 'text-2xl',
|
||||
'sm': 'text-lg',
|
||||
'md': 'text-xl',
|
||||
'lg': 'text-2xl',
|
||||
};
|
||||
|
||||
return cn('card-title font-bold', sizeClasses[size], className?.title);
|
||||
@@ -144,98 +105,45 @@ const Card = ({
|
||||
return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
|
||||
};
|
||||
|
||||
const renderCardContent = () => {
|
||||
const hasContent = children || actions || footer;
|
||||
|
||||
const titleContent = (
|
||||
<div className='group flex items-center !justify-between w-full'>
|
||||
<div className='flex-1'>
|
||||
{title && <h2 className={getTitleClasses()}>{title}</h2>}
|
||||
{subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
|
||||
</div>
|
||||
{collapsible && (
|
||||
<button
|
||||
onClick={() => handleCollapsedChange(!isCollapsed)}
|
||||
className='btn btn-ghost btn-sm btn-circle'
|
||||
aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
|
||||
>
|
||||
<Icon
|
||||
icon={
|
||||
isCollapsed
|
||||
? 'material-symbols:expand-more'
|
||||
: 'material-symbols:expand-less'
|
||||
}
|
||||
width={20}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const cardContent = (
|
||||
<div className='space-y-4'>
|
||||
{children}
|
||||
{actions && <div className={getActionsClasses()}>{actions}</div>}
|
||||
{footer && <div className={getFooterClasses()}>{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{image && (
|
||||
<figure>
|
||||
<Image
|
||||
src={image}
|
||||
alt={imageAlt || title || 'Card image'}
|
||||
width={getImageDimensions().width}
|
||||
height={getImageDimensions().height}
|
||||
className={getImageClasses()}
|
||||
/>
|
||||
</figure>
|
||||
)}
|
||||
<div className={getBodyClasses()}>
|
||||
{collapsible && hasContent ? (
|
||||
<Collapse
|
||||
variant='default'
|
||||
bordered={false}
|
||||
open={!isCollapsed}
|
||||
onOpenChange={handleCollapsedChange}
|
||||
title={titleContent}
|
||||
titleClassName='w-full cursor-pointer'
|
||||
contentClassName='p-0'
|
||||
fullWidth={true}
|
||||
>
|
||||
{cardContent}
|
||||
</Collapse>
|
||||
) : (
|
||||
<>
|
||||
{(title || subtitle) && (
|
||||
<div className='mb-4'>
|
||||
{title && <h2 className={getTitleClasses()}>{title}</h2>}
|
||||
{subtitle && (
|
||||
<p className={getSubtitleClasses()}>{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasContent && cardContent}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
if (variant === 'image-full' && image) {
|
||||
return (
|
||||
<div className={getCardClasses()} {...props}>
|
||||
{renderCardContent()}
|
||||
<figure>
|
||||
<Image
|
||||
src={image}
|
||||
alt={imageAlt || title || 'Card image'}
|
||||
className={getImageClasses()}
|
||||
/>
|
||||
</figure>
|
||||
<div className={getBodyClasses()}>
|
||||
{title && <h2 className={getTitleClasses()}>{title}</h2>}
|
||||
{subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
|
||||
{children}
|
||||
{actions && <div className={getActionsClasses()}>{actions}</div>}
|
||||
</div>
|
||||
{footer && <div className={getFooterClasses()}>{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={getCardClasses()} {...props}>
|
||||
{renderCardContent()}
|
||||
{image && (
|
||||
<figure>
|
||||
<Image
|
||||
src={image}
|
||||
alt={imageAlt || title || 'Card image'}
|
||||
className={getImageClasses()}
|
||||
/>
|
||||
</figure>
|
||||
)}
|
||||
<div className={getBodyClasses()}>
|
||||
{title && <h2 className={getTitleClasses()}>{title}</h2>}
|
||||
{subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
|
||||
{children}
|
||||
{actions && <div className={getActionsClasses()}>{actions}</div>}
|
||||
</div>
|
||||
{footer && <div className={getFooterClasses()}>{footer}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -26,9 +26,6 @@ export type CollapseProps = {
|
||||
disabled?: boolean;
|
||||
/** Allow only one open at a time by switching to radio input */
|
||||
asRadio?: boolean;
|
||||
/** Force full width instead of auto-fit when collapsed
|
||||
* (Khusus justify-between dan justify-end) */
|
||||
fullWidth?: boolean;
|
||||
/** Extra classnames */
|
||||
className?: string;
|
||||
titleClassName?: string;
|
||||
@@ -47,7 +44,6 @@ export const Collapse = ({
|
||||
bordered,
|
||||
disabled,
|
||||
asRadio = false,
|
||||
fullWidth,
|
||||
className,
|
||||
titleClassName,
|
||||
contentClassName,
|
||||
@@ -72,9 +68,9 @@ export const Collapse = ({
|
||||
'collapse',
|
||||
variant === 'arrow' && 'collapse-arrow',
|
||||
variant === 'plus' && 'collapse-plus',
|
||||
bordered && 'border base-content/20 border-opacity-20 rounded-box',
|
||||
bordered && 'border base-content/20 border-opacity-20 rounded',
|
||||
disabled && 'opacity-60 pointer-events-none',
|
||||
!fullWidth && !open && 'w-fit',
|
||||
!open && 'w-fit',
|
||||
className
|
||||
);
|
||||
|
||||
|
||||
+24
-42
@@ -1,52 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ReactNode,
|
||||
RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export const useModal = (isNestingModal = false) => {
|
||||
export const useModal = () => {
|
||||
const ref = useRef<HTMLDialogElement>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const openModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
if (isNestingModal) {
|
||||
ref.current.showModal();
|
||||
} else {
|
||||
ref.current.show();
|
||||
}
|
||||
setOpen(true);
|
||||
}, [isNestingModal]);
|
||||
|
||||
ref.current?.showModal();
|
||||
}, []);
|
||||
|
||||
const closeModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
ref.current.close();
|
||||
setOpen(false);
|
||||
ref.current?.close();
|
||||
}, []);
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
open ? closeModal() : openModal();
|
||||
if (open) {
|
||||
closeModal();
|
||||
} else {
|
||||
openModal();
|
||||
}
|
||||
}, [open, closeModal, openModal]);
|
||||
|
||||
useEffect(() => {
|
||||
const dialog = ref.current;
|
||||
if (!dialog) return;
|
||||
if (ref.current) {
|
||||
ref.current.addEventListener('close', () => {
|
||||
closeModal();
|
||||
});
|
||||
}
|
||||
|
||||
const handleClose = () => setOpen(false);
|
||||
dialog.addEventListener('close', handleClose);
|
||||
|
||||
return () => {
|
||||
dialog.removeEventListener('close', handleClose);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { ref, open, openModal, closeModal, toggle } as const;
|
||||
return { ref, open, setOpen, openModal, closeModal, toggle } as const;
|
||||
};
|
||||
|
||||
interface ModalProps {
|
||||
@@ -60,19 +46,15 @@ interface ModalProps {
|
||||
}
|
||||
|
||||
const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
|
||||
const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
|
||||
if (closeOnBackdrop && e.target === ref.current) {
|
||||
ref.current?.close();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<dialog
|
||||
ref={ref}
|
||||
className={cn('modal', className?.modal)}
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<dialog ref={ref} className={cn('modal', className?.modal)}>
|
||||
<div className={cn('modal-box', className?.modalBox)}>{children}</div>
|
||||
|
||||
{closeOnBackdrop && (
|
||||
<form method='dialog' className='modal-backdrop'>
|
||||
<button>close</button>
|
||||
</form>
|
||||
)}
|
||||
</dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,38 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import toast from 'react-hot-toast';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Menu from '@/components/menu/Menu';
|
||||
import MenuItem from '@/components/menu/MenuItem';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { AuthApi } from '@/services/api/auth';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
|
||||
interface NavbarProps {
|
||||
title: string;
|
||||
toggleSidebar?: () => void;
|
||||
}
|
||||
|
||||
const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
|
||||
const { setUser } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const logoutClickHandler = async () => {
|
||||
const logoutRes = await AuthApi.logout();
|
||||
|
||||
if (isResponseError(logoutRes)) {
|
||||
toast.error('Gagal logout! Coba lagi!');
|
||||
return;
|
||||
}
|
||||
|
||||
setUser(undefined);
|
||||
router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='navbar px-4 bg-base-100 shadow-sm'>
|
||||
<div className='flex-1'>
|
||||
@@ -64,7 +42,8 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
|
||||
</div>
|
||||
|
||||
<Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
|
||||
<MenuItem title='Logout' onClick={logoutClickHandler} />
|
||||
<MenuItem title='Settings' href='#' />
|
||||
<MenuItem title='Logout' href='#' />
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -185,17 +185,17 @@ const Pagination = ({
|
||||
currentPage <= 2
|
||||
? currentPage + 2
|
||||
: currentPage === totalPages - 2
|
||||
? 3
|
||||
: currentPage >= totalPages - 1
|
||||
? 4
|
||||
: 1
|
||||
? 3
|
||||
: currentPage >= totalPages - 1
|
||||
? 4
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 2 || currentPage >= totalPages - 1
|
||||
? totalPages - 3
|
||||
: currentPage === totalPages - 2
|
||||
? totalPages - 4
|
||||
: 2
|
||||
? totalPages - 4
|
||||
: 2
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
@@ -242,15 +242,15 @@ const Pagination = ({
|
||||
currentPage <= 3
|
||||
? currentPage + 2
|
||||
: currentPage >= 4
|
||||
? currentPage + 2
|
||||
: 1
|
||||
? currentPage + 2
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 3
|
||||
? totalPages - 2
|
||||
: currentPage >= 4
|
||||
? totalPages - 1
|
||||
: 0
|
||||
? totalPages - 1
|
||||
: 0
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
FilterFn,
|
||||
SortingState,
|
||||
OnChangeFn,
|
||||
Row,
|
||||
} from '@tanstack/react-table';
|
||||
import { rankItem } from '@tanstack/match-sorter-utils';
|
||||
import { Icon } from '@iconify/react';
|
||||
@@ -51,7 +50,6 @@ export interface TableProps<TData extends object> {
|
||||
manualSorting?: boolean;
|
||||
rowSelection?: Record<string, boolean>;
|
||||
setRowSelection?: OnChangeFn<Record<string, boolean>>;
|
||||
enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
|
||||
}
|
||||
|
||||
const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
|
||||
@@ -92,7 +90,6 @@ const Table = <TData extends object>({
|
||||
manualSorting = false,
|
||||
rowSelection,
|
||||
setRowSelection,
|
||||
enableRowSelection,
|
||||
}: TableProps<TData>) => {
|
||||
const isServerSideTable =
|
||||
totalItems !== undefined &&
|
||||
@@ -153,10 +150,6 @@ const Table = <TData extends object>({
|
||||
tableOptions.getRowId = (row) => (row as { id: string }).id;
|
||||
}
|
||||
|
||||
if (enableRowSelection !== undefined) {
|
||||
tableOptions.enableRowSelection = enableRowSelection;
|
||||
}
|
||||
|
||||
const table = useReactTable(tableOptions);
|
||||
const { setPageSize } = table;
|
||||
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
import { HTMLAttributes, ReactNode, useEffect, useState } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface TabItem {
|
||||
id: string;
|
||||
label: ReactNode;
|
||||
content?: ReactNode;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface TabsProps
|
||||
extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
||||
tabs: TabItem[];
|
||||
variant?: 'bordered' | 'lifted' | 'boxed';
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
placement?: 'top' | 'bottom';
|
||||
/** Tab yang aktif secara default (uncontrolled mode) */
|
||||
defaultActiveId?: string;
|
||||
/** Tab yang aktif (controlled mode, dikontrol parent) */
|
||||
activeTabId?: string;
|
||||
className?:
|
||||
| string
|
||||
| {
|
||||
wrapper?: string;
|
||||
tab?: string;
|
||||
content?: string;
|
||||
};
|
||||
onTabChange?: (tabId: string) => void;
|
||||
}
|
||||
|
||||
const Tabs = ({
|
||||
tabs,
|
||||
variant,
|
||||
size = 'md',
|
||||
placement = 'top',
|
||||
defaultActiveId,
|
||||
activeTabId: controlledActiveId,
|
||||
className,
|
||||
onTabChange,
|
||||
...props
|
||||
}: TabsProps) => {
|
||||
// State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
|
||||
const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
|
||||
defaultActiveId || tabs[0]?.id || ''
|
||||
);
|
||||
|
||||
const isControlled = controlledActiveId !== undefined;
|
||||
const activeTabId = isControlled ? controlledActiveId : uncontrolledActiveId;
|
||||
|
||||
const handleTabChange = (tabId: string) => {
|
||||
if (tabId === activeTabId) return;
|
||||
if (!isControlled) setUncontrolledActiveId(tabId);
|
||||
onTabChange?.(tabId);
|
||||
};
|
||||
|
||||
const { wrapper: wrapperClassName, tab: tabClassName } =
|
||||
typeof className === 'object'
|
||||
? className
|
||||
: { wrapper: className, tab: undefined };
|
||||
|
||||
const getTabsClasses = () => {
|
||||
const variantClasses: Record<string, string> = {
|
||||
bordered: 'tabs-bordered',
|
||||
lifted: 'tabs-lift',
|
||||
boxed: 'tabs-box',
|
||||
};
|
||||
|
||||
const sizeClasses: Record<string, string> = {
|
||||
xs: 'tabs-xs',
|
||||
sm: 'tabs-sm',
|
||||
md: '',
|
||||
lg: 'tabs-lg',
|
||||
xl: 'tabs-xl',
|
||||
};
|
||||
|
||||
const placementClasses: Record<string, string> = {
|
||||
top: '',
|
||||
bottom: 'tabs-bottom',
|
||||
};
|
||||
|
||||
return cn(
|
||||
'tabs',
|
||||
variant && variantClasses[variant],
|
||||
sizeClasses[size],
|
||||
placementClasses[placement],
|
||||
wrapperClassName
|
||||
);
|
||||
};
|
||||
|
||||
const getTabClasses = (isActive: boolean, isDisabled?: boolean) =>
|
||||
cn(
|
||||
'tab',
|
||||
{
|
||||
'tab-active': isActive,
|
||||
'tab-disabled': isDisabled,
|
||||
},
|
||||
tabClassName
|
||||
);
|
||||
|
||||
const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
'w-full',
|
||||
typeof className === 'string' ? className : undefined
|
||||
)}
|
||||
>
|
||||
<div role='tablist' className={getTabsClasses()}>
|
||||
{tabs.map(({ id, label, disabled }) => (
|
||||
<button
|
||||
key={id}
|
||||
role='tab'
|
||||
className={getTabClasses(id === activeTabId, disabled)}
|
||||
onClick={() => !disabled && handleTabChange(id)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeContent && <div className='mt-4'>{activeContent}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
@@ -6,9 +6,147 @@ import useSWRImmutable from 'swr/immutable';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
|
||||
import { AxiosError } from 'axios';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { GetMeResponse } from '@/types/api/api-general';
|
||||
|
||||
// TODO: delete this later, DONT HARDCODE USER DATA
|
||||
const DUMMY_USER = {
|
||||
id: 1,
|
||||
email: 'admin@mbugroup.id',
|
||||
npk: '0001',
|
||||
name: 'Super Admin',
|
||||
image: null,
|
||||
created_at: '2025-09-30T03:24:20.899229Z',
|
||||
updated_at: '2025-09-30T03:24:20.899229Z',
|
||||
roles: [
|
||||
{
|
||||
id: 1,
|
||||
key: 'mbu.super_admin',
|
||||
name: 'MBU Administrator',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'mbu:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'mbu:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'mbu:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
key: 'lti.super_admin',
|
||||
name: 'LTI Administrator',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 4,
|
||||
name: 'lti:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'lti:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'lti:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
key: 'manbu.super_admin',
|
||||
name: 'MANBU Administrator',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 7,
|
||||
name: 'manbu:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'manbu:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'manbu:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface RequireAuthProps {
|
||||
children?: ReactNode;
|
||||
@@ -18,20 +156,17 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
|
||||
const router = useRouter();
|
||||
const { setUser, setIsLoadingUser } = useAuth();
|
||||
|
||||
const {
|
||||
data: userResponse,
|
||||
isLoading: isLoadingUserResponse,
|
||||
error: userErrorResponse,
|
||||
} = useSWRImmutable<
|
||||
GetMeResponse & { ok?: boolean },
|
||||
AxiosError<BaseApiResponse>,
|
||||
SWRHttpKey
|
||||
>('/sso/userinfo', httpClientFetcher, {
|
||||
shouldRetryOnError: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
refreshInterval: 0,
|
||||
});
|
||||
const { data: userResponse, isLoading: isLoadingUserResponse } =
|
||||
useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
|
||||
'/auth/sso/userinfo',
|
||||
httpClientFetcher,
|
||||
{
|
||||
shouldRetryOnError: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
refreshInterval: 0,
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoadingUser(isLoadingUserResponse);
|
||||
@@ -40,25 +175,23 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(userResponse)) {
|
||||
setUser(userResponse.data);
|
||||
} else if (
|
||||
isResponseError(userErrorResponse?.response?.data) &&
|
||||
typeof window !== 'undefined'
|
||||
) {
|
||||
router.replace(
|
||||
`${process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string}?redirect_url=${window.location.href}`
|
||||
);
|
||||
} else {
|
||||
// router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
||||
// TODO: remove this later, DONT HARDCODE USER DATA
|
||||
setUser(DUMMY_USER);
|
||||
}
|
||||
}, [userResponse, userErrorResponse, setIsLoadingUser, setUser]);
|
||||
}, [userResponse, setIsLoadingUser, setUser]);
|
||||
|
||||
if (isLoadingUserResponse && !userResponse && !userErrorResponse) {
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// TODO: uncomment this later
|
||||
// if (isLoadingUserResponse && !userResponse) {
|
||||
// return (
|
||||
// <div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
// <span className='loading loading-spinner loading-xl' />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
return <>{isResponseSuccess(userResponse) && children}</>;
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default RequireAuth;
|
||||
|
||||
@@ -64,46 +64,44 @@ export const FormActions = <T,>({
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
{type === 'detail' &&
|
||||
showApproveReject &&
|
||||
(onApprove || onReject) && (
|
||||
<>
|
||||
{onApprove && (
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={onApprove}
|
||||
className='px-4'
|
||||
isLoading={isApproveLoading}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:check-circle-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Approve
|
||||
</Button>
|
||||
)}
|
||||
{onReject && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={onReject}
|
||||
className='px-4'
|
||||
isLoading={isRejectLoading}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:cancel-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Reject
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{type === 'detail' && showApproveReject && (onApprove || onReject) && (
|
||||
<>
|
||||
{onApprove && (
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={onApprove}
|
||||
className='px-4'
|
||||
isLoading={isApproveLoading}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:check-circle-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Approve
|
||||
</Button>
|
||||
)}
|
||||
{onReject && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={onReject}
|
||||
className='px-4'
|
||||
isLoading={isRejectLoading}
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:cancel-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Reject
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{type !== 'detail' && (
|
||||
|
||||
@@ -2,27 +2,15 @@ import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
interface FormHeaderProps {
|
||||
type?: 'add' | 'edit' | 'detail';
|
||||
type: 'add' | 'edit' | 'detail';
|
||||
title: string;
|
||||
backUrl?: string;
|
||||
onBackClick?: () => void;
|
||||
backUrl: string;
|
||||
}
|
||||
|
||||
export const FormHeader = ({
|
||||
type,
|
||||
title,
|
||||
backUrl,
|
||||
onBackClick,
|
||||
}: FormHeaderProps) => {
|
||||
export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
|
||||
return (
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
type='button'
|
||||
href={!onBackClick ? backUrl : undefined}
|
||||
onClick={onBackClick}
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
@@ -30,7 +18,6 @@ export const FormHeader = ({
|
||||
{type === 'add' && `Tambah ${title}`}
|
||||
{type === 'edit' && `Edit ${title}`}
|
||||
{type === 'detail' && `Detail ${title}`}
|
||||
{!type && title}
|
||||
</h1>
|
||||
</header>
|
||||
);
|
||||
|
||||
@@ -3,21 +3,16 @@
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
FocusEventHandler,
|
||||
useEffect,
|
||||
useState,
|
||||
ReactNode,
|
||||
} from 'react';
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import Modal, { useModal } from '../Modal';
|
||||
import { DateRange, DayPicker, Matcher } from 'react-day-picker';
|
||||
import 'react-day-picker/dist/style.css';
|
||||
import Button from '../Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface DateInputProps {
|
||||
label?: string;
|
||||
bottomLabel?: string;
|
||||
name: string;
|
||||
value?: string | { from?: string; to?: string };
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
min?: string;
|
||||
max?: string;
|
||||
@@ -33,9 +28,9 @@ export interface DateInputProps {
|
||||
readOnly?: boolean;
|
||||
required?: boolean;
|
||||
isLoading?: boolean;
|
||||
isRange?: boolean;
|
||||
isNestedModal?: boolean; // New prop to indicate if used inside another modal
|
||||
errorMessage?: string;
|
||||
startAdornment?: ReactNode;
|
||||
endAdornment?: ReactNode;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
onBlur?: FocusEventHandler<HTMLInputElement>;
|
||||
}
|
||||
@@ -45,148 +40,22 @@ const DateInput = ({
|
||||
bottomLabel,
|
||||
name,
|
||||
value,
|
||||
placeholder = 'dd/mm/yyyy',
|
||||
placeholder,
|
||||
min,
|
||||
max,
|
||||
className,
|
||||
isError: externalError,
|
||||
isValid: externalValid,
|
||||
errorMessage: externalErrorMessage,
|
||||
isError,
|
||||
isValid,
|
||||
errorMessage,
|
||||
startAdornment,
|
||||
endAdornment,
|
||||
disabled = false,
|
||||
required = false,
|
||||
onChange,
|
||||
onBlur,
|
||||
readOnly = false,
|
||||
isLoading = false,
|
||||
isRange = false,
|
||||
isNestedModal = false,
|
||||
}: DateInputProps) => {
|
||||
const [internalError, setInternalError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Date | undefined>();
|
||||
const [selectedRange, setSelectedRange] = useState<{
|
||||
from?: Date;
|
||||
to?: Date;
|
||||
}>({});
|
||||
const [displayValue, setDisplayValue] = useState<string>('');
|
||||
|
||||
const minDate = min
|
||||
? new Date(min.split('/').reverse().join('-'))
|
||||
: undefined;
|
||||
const maxDate = max
|
||||
? new Date(max.split('/').reverse().join('-'))
|
||||
: undefined;
|
||||
|
||||
const calendarModal = useModal(isNestedModal);
|
||||
|
||||
// --- Sync value props ---
|
||||
useEffect(() => {
|
||||
if (!value) {
|
||||
setDisplayValue('');
|
||||
return;
|
||||
}
|
||||
if (isRange && typeof value === 'object') {
|
||||
const from = value.from ? new Date(value.from) : undefined;
|
||||
const to = value.to ? new Date(value.to) : undefined;
|
||||
setSelectedRange({ from, to });
|
||||
setDisplayValue(
|
||||
`${from ? formatDate(from, 'DD/MM/YYYY') : ''} ${
|
||||
to ? '- ' + formatDate(to, 'DD/MM/YYYY') : ''
|
||||
}`
|
||||
);
|
||||
} else if (typeof value === 'string') {
|
||||
const iso = value.includes('/')
|
||||
? value.split('/').reverse().join('-')
|
||||
: value;
|
||||
const date = new Date(iso);
|
||||
setSelected(date);
|
||||
setDisplayValue(formatDate(iso, 'DD/MM/YYYY'));
|
||||
}
|
||||
}, [value, isRange]);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
if (!disabled && !readOnly) calendarModal.openModal();
|
||||
};
|
||||
|
||||
const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
|
||||
onBlur?.(e);
|
||||
};
|
||||
|
||||
const handleSelectSingle = (selectedDate?: Date) => {
|
||||
if (!selectedDate) return;
|
||||
if (minDate && selectedDate < minDate) {
|
||||
setInternalError(`Tanggal tidak boleh sebelum ${min}`);
|
||||
return;
|
||||
}
|
||||
if (maxDate && selectedDate > maxDate) {
|
||||
setInternalError(`Tanggal tidak boleh setelah ${max}`);
|
||||
return;
|
||||
}
|
||||
setInternalError(null);
|
||||
setSelected(selectedDate);
|
||||
const formattedDisplay = formatDate(selectedDate, 'DD/MM/YYYY');
|
||||
const formattedISO = formatDate(selectedDate, 'YYYY-MM-DD');
|
||||
setDisplayValue(formattedDisplay);
|
||||
|
||||
const syntheticEvent = {
|
||||
target: { name, value: formattedISO },
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
|
||||
if (!range) return;
|
||||
setSelectedRange(range);
|
||||
|
||||
const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
|
||||
const toStr = range.to ? formatDate(range.to, 'DD/MM/YYYY') : '';
|
||||
setDisplayValue(`${fromStr}${toStr ? ' - ' + toStr : ''}`);
|
||||
|
||||
// Jika kedua tanggal sudah terpilih
|
||||
if (range.from && range.to) {
|
||||
if (minDate && range.from < minDate) {
|
||||
setInternalError(`Tanggal mulai tidak boleh sebelum ${min}`);
|
||||
return;
|
||||
}
|
||||
if (maxDate && range.to > maxDate) {
|
||||
setInternalError(`Tanggal akhir tidak boleh setelah ${max}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setInternalError(null);
|
||||
const syntheticEvent = {
|
||||
target: {
|
||||
name,
|
||||
value: {
|
||||
from: formatDate(range.from, 'YYYY-MM-DD'),
|
||||
to: formatDate(range.to, 'YYYY-MM-DD'),
|
||||
},
|
||||
},
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetDate = () => {
|
||||
setSelected(undefined);
|
||||
setSelectedRange({});
|
||||
setDisplayValue('');
|
||||
const syntheticEvent = {
|
||||
target: { name, value: isRange ? { from: '', to: '' } : '' },
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const handleSaveDate = () => {
|
||||
if (internalError) return;
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const finalIsError = externalError || !!internalError;
|
||||
const finalErrorMessage = internalError || externalErrorMessage;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -199,136 +68,68 @@ const DateInput = ({
|
||||
htmlFor={name}
|
||||
className={cn(
|
||||
'w-full text-sm font-normal leading-5',
|
||||
{ 'text-error': finalIsError },
|
||||
{
|
||||
'text-error': isError,
|
||||
},
|
||||
className?.label
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<span className='text-error' title='required'>
|
||||
<>
|
||||
{' '}
|
||||
*
|
||||
</span>
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'>*</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
|
||||
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
|
||||
{
|
||||
'border-error': finalIsError,
|
||||
'border-success': externalValid && !finalIsError,
|
||||
'border-error': isError,
|
||||
'border-success!': isValid,
|
||||
},
|
||||
className?.inputWrapper
|
||||
)}
|
||||
>
|
||||
{startAdornment && startAdornment}
|
||||
|
||||
<input
|
||||
type='text'
|
||||
type='date'
|
||||
id={name}
|
||||
name={name}
|
||||
placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
|
||||
value={displayValue}
|
||||
onBlur={handleBlur}
|
||||
onClick={handleClick}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
min={min}
|
||||
max={max}
|
||||
disabled={disabled}
|
||||
readOnly // ✅ tidak bisa diketik manual
|
||||
className={cn(
|
||||
'grow bg-transparent cursor-pointer focus:outline-none',
|
||||
'grow bg-transparent cursor-pointer',
|
||||
className?.input
|
||||
)}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
|
||||
{isLoading && (
|
||||
{(isLoading || endAdornment) && (
|
||||
<div className='flex flex-row gap-2'>
|
||||
<span className='loading loading-spinner' />
|
||||
{isLoading && <span className='loading loading-spinner' />}
|
||||
{endAdornment && endAdornment}
|
||||
</div>
|
||||
)}
|
||||
<Icon
|
||||
icon='uil:calendar'
|
||||
width={24}
|
||||
height={24}
|
||||
className='cursor-pointer text-dark'
|
||||
onClick={(e) =>
|
||||
handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!finalIsError && bottomLabel && (
|
||||
{!isError && bottomLabel && (
|
||||
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
|
||||
)}
|
||||
{finalIsError && finalErrorMessage && (
|
||||
<p className='w-full text-sm text-error'>{finalErrorMessage}</p>
|
||||
{isError && errorMessage && (
|
||||
<p className='w-full text-sm text-error'>{errorMessage}</p>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
ref={calendarModal.ref}
|
||||
className={{
|
||||
modal: 'rounded',
|
||||
modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
|
||||
}}
|
||||
closeOnBackdrop
|
||||
>
|
||||
{isRange ? (
|
||||
<DayPicker
|
||||
required={required}
|
||||
mode='range'
|
||||
captionLayout='dropdown-years'
|
||||
navLayout='around'
|
||||
reverseYears
|
||||
defaultMonth={selectedRange.from ?? new Date()}
|
||||
startMonth={minDate ?? new Date(1999, 1)}
|
||||
endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
|
||||
selected={selectedRange as DateRange}
|
||||
onSelect={handleSelectRange}
|
||||
footer={<div className='text-center mt-3'>{displayValue}</div>}
|
||||
disabled={
|
||||
[
|
||||
minDate ? { before: minDate } : undefined,
|
||||
maxDate ? { after: maxDate } : undefined,
|
||||
].filter(Boolean) as Matcher[]
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<DayPicker
|
||||
required={required}
|
||||
mode='single'
|
||||
captionLayout='dropdown-years'
|
||||
navLayout='around'
|
||||
reverseYears
|
||||
defaultMonth={selected ?? new Date()}
|
||||
startMonth={minDate ?? new Date(1999, 1)}
|
||||
endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
|
||||
selected={selected}
|
||||
onSelect={handleSelectSingle}
|
||||
disabled={
|
||||
[
|
||||
minDate ? { before: minDate } : undefined,
|
||||
maxDate ? { after: maxDate } : undefined,
|
||||
].filter(Boolean) as Matcher[]
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className='mt-auto flex flex-col gap-2'>
|
||||
{isRange && (
|
||||
<small className='text-secondary'>
|
||||
Tekan dua kali untuk memilih tanggal awal
|
||||
</small>
|
||||
)}
|
||||
|
||||
<div className='flex h-full justify-end items-end gap-2'>
|
||||
<Button type='button' color='warning' onClick={handleResetDate}>
|
||||
Reset
|
||||
</Button>
|
||||
{isRange && (
|
||||
<Button type='button' onClick={handleSaveDate}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
|
||||
import TextArea, { TextAreaProps } from '@/components/input/TextArea';
|
||||
|
||||
interface DebouncedTextAreaProps extends TextAreaProps {
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
|
||||
const { delay, onChange } = props;
|
||||
|
||||
const [internalChangeEvent, setInternalChangeEvent] =
|
||||
useState<ChangeEvent<HTMLTextAreaElement>>();
|
||||
const [internalValue, setInternalValue] = useState(props.value);
|
||||
|
||||
const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
|
||||
const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
|
||||
|
||||
const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
|
||||
e
|
||||
) => {
|
||||
setInternalValue(e.target.value);
|
||||
setInternalChangeEvent(e);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedChangeEvent) {
|
||||
onChange?.(debouncedChangeEvent);
|
||||
}
|
||||
}, [debouncedValue]);
|
||||
|
||||
return (
|
||||
<TextArea
|
||||
{...props}
|
||||
value={internalValue}
|
||||
onChange={internalChangeHandler}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DebouncedTextArea;
|
||||
@@ -1,194 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useDropzone, type Accept } from 'react-dropzone';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
interface DropFileInputProps {
|
||||
name: string;
|
||||
label?: string;
|
||||
bottomLabel?: string;
|
||||
caption?: string;
|
||||
values?: File[];
|
||||
accept?: Accept;
|
||||
required?: boolean;
|
||||
maxFiles?: number; // defaults to 1
|
||||
maxSize?: number; // defaults to 2097152 (2 MB)
|
||||
isError?: boolean;
|
||||
errorMessage?: string;
|
||||
disabled?: boolean;
|
||||
onChange?: (files: File[]) => void;
|
||||
onDelete?: (index: number) => void;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
inputContainer?: string;
|
||||
label?: string;
|
||||
inputWrapper?: string;
|
||||
caption?: string;
|
||||
bottomLabel?: string;
|
||||
errorMessage?: string;
|
||||
fileItemContainer?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const DropFileInput: React.FC<DropFileInputProps> = ({
|
||||
name,
|
||||
label,
|
||||
bottomLabel,
|
||||
caption = 'Seret atau Pilih Dokumen',
|
||||
values,
|
||||
accept,
|
||||
required,
|
||||
maxFiles = Infinity,
|
||||
maxSize,
|
||||
isError,
|
||||
errorMessage,
|
||||
disabled,
|
||||
onChange,
|
||||
onDelete,
|
||||
className,
|
||||
}) => {
|
||||
const isDisabled =
|
||||
Boolean(values && maxFiles && values.length >= maxFiles) || disabled;
|
||||
|
||||
const {
|
||||
acceptedFiles,
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
isFocused,
|
||||
isDragAccept,
|
||||
isDragReject,
|
||||
} = useDropzone({
|
||||
maxSize,
|
||||
maxFiles,
|
||||
accept: accept,
|
||||
disabled: isDisabled,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (values && maxFiles && values.length <= maxFiles) {
|
||||
onChange?.([...values, ...acceptedFiles]);
|
||||
}
|
||||
}, [acceptedFiles]);
|
||||
|
||||
return (
|
||||
<div className={cn('w-full', className?.wrapper)}>
|
||||
<div
|
||||
className={cn(
|
||||
'w-full flex flex-col gap-2 text-start',
|
||||
className?.inputContainer
|
||||
)}
|
||||
>
|
||||
{label && (
|
||||
<label
|
||||
htmlFor={name}
|
||||
className={cn(
|
||||
'w-full text-sm font-normal leading-5',
|
||||
className?.label
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<>
|
||||
{' '}
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'>*</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div
|
||||
{...getRootProps({
|
||||
'aria-disabled': isDisabled,
|
||||
className: cn(
|
||||
'dropzone w-full px-4 py-2 border border-dashed border-gray-300 rounded cursor-pointer transition-all',
|
||||
'hover:border-primary hover:bg-primary/10',
|
||||
{
|
||||
'border-success bg-success/10': isDragAccept,
|
||||
'border-error bg-error/10': isDragReject || isError,
|
||||
'border-primary bg-primary/10': isFocused,
|
||||
'bg-gray-200/20 cursor-not-allowed': isDisabled,
|
||||
},
|
||||
className?.inputWrapper
|
||||
),
|
||||
})}
|
||||
>
|
||||
<input
|
||||
{...getInputProps({
|
||||
id: name,
|
||||
name,
|
||||
disabled: isDisabled,
|
||||
'aria-disabled': isDisabled,
|
||||
})}
|
||||
/>
|
||||
{caption && (
|
||||
<p className={cn('text-gray-500 text-sm', className?.caption)}>
|
||||
{caption}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isError && bottomLabel && (
|
||||
<p
|
||||
className={cn('w-full text-sm opacity-60', className?.bottomLabel)}
|
||||
>
|
||||
{bottomLabel}
|
||||
</p>
|
||||
)}
|
||||
{isError && (
|
||||
<p
|
||||
className={cn('w-full text-sm text-error', className?.errorMessage)}
|
||||
>
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{values && values.length > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full mt-1.5 flex flex-col gap-1.5',
|
||||
className?.fileItemContainer
|
||||
)}
|
||||
>
|
||||
{values.map((file, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={cn('w-full flex flex-row items-center gap-2')}
|
||||
>
|
||||
<div className='p-2 rounded-full bg-primary/10'>
|
||||
<Icon
|
||||
icon='basil:file-solid'
|
||||
width={24}
|
||||
height={24}
|
||||
className='text-blue-500'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='w-full text-sm'>
|
||||
<p>{file.name}</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='error'
|
||||
onClick={() => {
|
||||
onDelete?.(idx);
|
||||
}}
|
||||
className='rounded-full text-error focus-visible:text-error-content hover:text-error-content'
|
||||
>
|
||||
<Icon icon='fluent:delete-12-regular' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropFileInput;
|
||||
@@ -69,7 +69,10 @@ const FileInput = ({
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
disabled={disabled}
|
||||
className={cn('grow file-input w-full h-12 rounded', className?.input)}
|
||||
className={cn(
|
||||
'grow file-input w-full h-12 rounded',
|
||||
className?.input
|
||||
)}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,88 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEvent } from 'react';
|
||||
import {
|
||||
PatternFormat,
|
||||
NumberFormatBase,
|
||||
NumberFormatBaseProps,
|
||||
OnValueChange,
|
||||
} from 'react-number-format';
|
||||
import { PatternFormat, OnValueChange } from 'react-number-format';
|
||||
import TextInput, { TextInputProps } from '@/components/input/TextInput';
|
||||
|
||||
interface PatternInputProps extends Omit<TextInputProps, 'type'> {
|
||||
/**
|
||||
* Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
|
||||
*/
|
||||
type?: 'password' | 'tel' | 'text' | undefined;
|
||||
|
||||
/** Format pattern, e.g. "##/##/####", "(###) ###-####", "####-####-####" */
|
||||
format: string;
|
||||
/** Mask karakter kosong, misal "_" */
|
||||
|
||||
/** Mask character for empty slots, e.g. "_" */
|
||||
mask?: string;
|
||||
/** Menampilkan mask walau value kosong */
|
||||
|
||||
/** Allow showing mask even when value is empty */
|
||||
allowEmptyFormatting?: boolean;
|
||||
/** Placeholder karakter format, default: "#" */
|
||||
|
||||
patternChar?: string;
|
||||
/** Jika true, izinkan huruf (A-Z) selain angka */
|
||||
inputVehicleNumber?: boolean;
|
||||
type?: 'text' | 'password' | 'tel';
|
||||
}
|
||||
|
||||
/**
|
||||
* PatternInput – tetap backward-compatible dengan Storybook
|
||||
* tapi bisa menerima huruf jika `allowCharacters={true}`
|
||||
*/
|
||||
const PatternInput = ({
|
||||
type = 'text',
|
||||
format,
|
||||
mask = '_',
|
||||
allowEmptyFormatting = false,
|
||||
patternChar = '#',
|
||||
inputVehicleNumber = false,
|
||||
onChange,
|
||||
...restProps
|
||||
}: PatternInputProps) => {
|
||||
const handleValueChange: OnValueChange = (values, { event }) => {
|
||||
const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
|
||||
if (newEvent) {
|
||||
newEvent.target.value = values.value.toUpperCase();
|
||||
onChange?.(newEvent);
|
||||
type = 'text',
|
||||
format,
|
||||
mask = '_',
|
||||
allowEmptyFormatting = false,
|
||||
patternChar = '#',
|
||||
onChange,
|
||||
...restProps
|
||||
}: PatternInputProps) => {
|
||||
const valueChangeHandler: OnValueChange = (
|
||||
patternFormatValues,
|
||||
sourceInfo
|
||||
) => {
|
||||
const newChangeEvent = sourceInfo.event as
|
||||
| ChangeEvent<HTMLInputElement>
|
||||
| undefined;
|
||||
|
||||
if (newChangeEvent) {
|
||||
newChangeEvent.target.value = patternFormatValues.value;
|
||||
|
||||
onChange?.(newChangeEvent);
|
||||
}
|
||||
};
|
||||
|
||||
if (inputVehicleNumber) {
|
||||
return (
|
||||
<NumberFormatBase
|
||||
{...restProps}
|
||||
type={type}
|
||||
customInput={TextInput}
|
||||
format={(value) => {
|
||||
const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
|
||||
|
||||
const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
|
||||
if (!match) return clean;
|
||||
const [, prefix, number, suffix] = match;
|
||||
return [prefix, number, suffix].filter(Boolean).join(' ');
|
||||
}}
|
||||
removeFormatting={(val) => val.replace(/\s+/g, '')}
|
||||
isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
|
||||
getCaretBoundary={(val) =>
|
||||
Array(val.length + 1)
|
||||
.fill(true)
|
||||
.map(Boolean)
|
||||
}
|
||||
onValueChange={handleValueChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PatternFormat
|
||||
{...restProps}
|
||||
type={type}
|
||||
format={format}
|
||||
mask={mask}
|
||||
allowEmptyFormatting={allowEmptyFormatting}
|
||||
patternChar={patternChar}
|
||||
customInput={TextInput}
|
||||
onValueChange={handleValueChange}
|
||||
onValueChange={valueChangeHandler}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import Select, {
|
||||
OptionProps,
|
||||
GroupBase,
|
||||
InputActionMeta,
|
||||
MultiValue,
|
||||
SingleValue,
|
||||
components as ReactSelectComponents,
|
||||
ControlProps,
|
||||
} from 'react-select';
|
||||
import CreatableSelect from 'react-select/creatable';
|
||||
import makeAnimated from 'react-select/animated';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
import { cn, getByPath } from '@/lib/helper';
|
||||
import useSWR from 'swr';
|
||||
import { httpClientFetcher } from '@/services/http/client';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
|
||||
export interface OptionType {
|
||||
value: string | number;
|
||||
@@ -55,7 +54,6 @@ interface SelectInputBaseProps<T = OptionType> {
|
||||
delay?: number;
|
||||
onInputChange?: (search: string) => void;
|
||||
startAdornment?: ReactNode;
|
||||
menuPortalTarget?: HTMLElement | null;
|
||||
}
|
||||
|
||||
interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
|
||||
@@ -66,33 +64,6 @@ interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
|
||||
|
||||
const animatedComponents = makeAnimated();
|
||||
|
||||
const CustomControl = <
|
||||
Option,
|
||||
IsMulti extends boolean,
|
||||
Group extends GroupBase<Option>,
|
||||
>(
|
||||
props: ControlProps<Option, IsMulti, Group>
|
||||
) => {
|
||||
const { children } = props;
|
||||
|
||||
const customProps = props.selectProps as unknown as {
|
||||
shouldShowAdornment?: boolean;
|
||||
startAdornment?: ReactNode;
|
||||
};
|
||||
|
||||
const shouldShowAdornment = customProps.shouldShowAdornment ?? false;
|
||||
const startAdornment = customProps.startAdornment;
|
||||
|
||||
return (
|
||||
<ReactSelectComponents.Control {...props}>
|
||||
<div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
|
||||
{shouldShowAdornment && startAdornment}
|
||||
{children}
|
||||
</div>
|
||||
</ReactSelectComponents.Control>
|
||||
);
|
||||
};
|
||||
|
||||
const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
const {
|
||||
label,
|
||||
@@ -118,24 +89,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
createables = false,
|
||||
onInputChange,
|
||||
startAdornment,
|
||||
menuPortalTarget,
|
||||
} = props;
|
||||
|
||||
const [internalInputValue, setInternalInputValue] = useState('');
|
||||
const [debouncedInputValue] = useDebounce(internalInputValue, delay);
|
||||
|
||||
const shouldShowAdornment = startAdornment && !internalInputValue;
|
||||
|
||||
const components = useMemo(() => {
|
||||
const base = isAnimated ? animatedComponents : {};
|
||||
const customComponents = { ...base, IndicatorSeparator: () => null };
|
||||
|
||||
if (startAdornment) {
|
||||
customComponents.Control = CustomControl;
|
||||
}
|
||||
|
||||
return customComponents;
|
||||
}, [isAnimated, startAdornment]);
|
||||
return { ...base, IndicatorSeparator: () => null };
|
||||
}, [isAnimated]);
|
||||
|
||||
const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
|
||||
if (meta.action === 'input-change') setInternalInputValue(val);
|
||||
@@ -179,12 +141,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<>
|
||||
{' '}
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'>*</span>
|
||||
</span>
|
||||
</>
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'> *</span>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
@@ -197,7 +156,6 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
menuIsOpen={openMenu}
|
||||
inputValue={internalInputValue}
|
||||
onInputChange={internalInputChangeHandler}
|
||||
onMenuClose={() => setInternalInputValue('')}
|
||||
isMulti={isMulti}
|
||||
isDisabled={isDisabled}
|
||||
isLoading={isLoading}
|
||||
@@ -207,19 +165,17 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
placeholder={placeholder}
|
||||
className={cn('w-full', className?.select)}
|
||||
classNames={{
|
||||
...(!startAdornment && {
|
||||
control: ({ isFocused, isDisabled }) =>
|
||||
cn(
|
||||
'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
|
||||
{
|
||||
'border-red-500! ring-2 ring-red-200': isError,
|
||||
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
|
||||
'border-gray-300': !isError && !isFocused,
|
||||
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
|
||||
}
|
||||
),
|
||||
valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
|
||||
}),
|
||||
control: ({ isFocused, isDisabled }) =>
|
||||
cn(
|
||||
'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
|
||||
{
|
||||
'border-red-500! ring-2 ring-red-200': isError,
|
||||
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
|
||||
'border-gray-300': !isError && !isFocused,
|
||||
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
|
||||
}
|
||||
),
|
||||
valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
|
||||
placeholder: () =>
|
||||
cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
|
||||
singleValue: () =>
|
||||
@@ -236,7 +192,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
|
||||
menuList: () => cn('p-2! max-h-60 overflow-auto'),
|
||||
option: ({ isFocused, isSelected }) =>
|
||||
cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
|
||||
cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
|
||||
'bg-indigo-600 text-white': isFocused,
|
||||
'bg-blue-500!': isSelected,
|
||||
'text-gray-700': !isFocused && !isSelected,
|
||||
@@ -256,15 +212,31 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
components={{
|
||||
...components,
|
||||
...(optionComponent ? { Option: optionComponent } : {}),
|
||||
...(startAdornment ? {
|
||||
Control: ({ children, innerRef, innerProps, menuIsOpen, isFocused, isDisabled }) => (
|
||||
<div
|
||||
ref={innerRef}
|
||||
{...innerProps}
|
||||
className={cn(
|
||||
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer! flex items-center',
|
||||
{
|
||||
'border-red-500! ring-2 ring-red-200': isError,
|
||||
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
|
||||
'border-gray-300': !isError && !isFocused,
|
||||
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className='flex-1 px-4! gap-1 flex items-center'>
|
||||
{startAdornment}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
} : {}),
|
||||
}}
|
||||
{...(startAdornment && {
|
||||
shouldShowAdornment,
|
||||
startAdornment,
|
||||
})}
|
||||
menuPortalTarget={
|
||||
typeof document !== 'undefined'
|
||||
? (menuPortalTarget ?? document.body)
|
||||
: undefined
|
||||
typeof document !== 'undefined' ? document.body : undefined
|
||||
}
|
||||
styles={{
|
||||
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
||||
@@ -281,8 +253,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
|
||||
const useSelect = <T,>(
|
||||
basePath: string,
|
||||
valueKey: keyof T | string,
|
||||
labelKey: keyof T | string,
|
||||
valueKey: keyof T,
|
||||
labelKey: keyof T,
|
||||
searchKey: string = 'search',
|
||||
params?: { [key: string]: string }
|
||||
) => {
|
||||
@@ -293,7 +265,7 @@ const useSelect = <T,>(
|
||||
[searchKey]: inputValue ?? '',
|
||||
...params,
|
||||
}).toString();
|
||||
}, [inputValue, searchKey, params]);
|
||||
}, [inputValue, searchKey]);
|
||||
|
||||
const optionsUrl = `${basePath}?${optionsUrlParams}`;
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ const TextArea = ({
|
||||
|
||||
<textarea
|
||||
className={cn(
|
||||
'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
|
||||
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
|
||||
{
|
||||
'border-error': isError,
|
||||
'border-success!': isValid,
|
||||
|
||||
@@ -49,18 +49,14 @@ const MenuItem = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<li onClick={onClick}>
|
||||
{href && (
|
||||
<Link href={href} className={menuItemBaseClassName}>
|
||||
{menuItemContent}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!href && (
|
||||
<button className={menuItemBaseClassName} onClick={onClick}>
|
||||
{menuItemContent}
|
||||
</button>
|
||||
)}
|
||||
{!href && <a className={menuItemBaseClassName}>{menuItemContent}</a>}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,29 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import { MouseEventHandler, RefObject, useState } from 'react';
|
||||
import { RefObject } from 'react';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Modal from '@/components/Modal';
|
||||
import Button, { ButtonProps } from '@/components/Button';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
export interface ConfirmationModalProps {
|
||||
interface ConfirmationModalProps {
|
||||
ref: RefObject<HTMLDialogElement | null>;
|
||||
type?: 'info' | 'success' | 'error';
|
||||
text?: string;
|
||||
closeOnBackdrop?: boolean;
|
||||
primaryButton?: ButtonProps & {
|
||||
primaryButton?: {
|
||||
text?: string;
|
||||
color?: Color;
|
||||
isLoading?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
secondaryButton?: ButtonProps & {
|
||||
secondaryButton?: {
|
||||
text?: string;
|
||||
color?: Color;
|
||||
isLoading?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
className?: {
|
||||
modal?: string;
|
||||
modalBox?: string;
|
||||
};
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const ConfirmationModal = ({
|
||||
@@ -34,24 +40,11 @@ const ConfirmationModal = ({
|
||||
primaryButton,
|
||||
secondaryButton,
|
||||
className,
|
||||
children,
|
||||
}: ConfirmationModalProps) => {
|
||||
const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
|
||||
|
||||
const closeModalHandler = () => {
|
||||
ref.current?.close();
|
||||
};
|
||||
|
||||
const primaryButtonClickHandler: MouseEventHandler<
|
||||
HTMLButtonElement
|
||||
> = async (event) => {
|
||||
setIsPrimaryButtonLoading(true);
|
||||
|
||||
await primaryButton?.onClick?.(event);
|
||||
|
||||
setIsPrimaryButtonLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
@@ -97,20 +90,13 @@ const ConfirmationModal = ({
|
||||
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
|
||||
</p>
|
||||
|
||||
{children && <div className='w-full'>{children}</div>}
|
||||
|
||||
<div className='w-full flex flex-row gap-2'>
|
||||
{secondaryButton && secondaryButton.text && (
|
||||
<Button
|
||||
{...secondaryButton}
|
||||
variant='ghost'
|
||||
color={secondaryButton?.color}
|
||||
color={secondaryButton?.color ?? 'none'}
|
||||
isLoading={secondaryButton?.isLoading}
|
||||
disabled={
|
||||
secondaryButton?.isLoading !== undefined
|
||||
? secondaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
disabled={secondaryButton?.isLoading}
|
||||
onClick={closeModalHandler}
|
||||
className='grow'
|
||||
>
|
||||
@@ -120,19 +106,10 @@ const ConfirmationModal = ({
|
||||
|
||||
{primaryButton && primaryButton.text && (
|
||||
<Button
|
||||
{...primaryButton}
|
||||
color={primaryButton?.color ?? 'info'}
|
||||
onClick={primaryButtonClickHandler}
|
||||
isLoading={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
disabled={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
onClick={primaryButton?.onClick}
|
||||
isLoading={primaryButton?.isLoading}
|
||||
disabled={primaryButton?.isLoading}
|
||||
className='grow'
|
||||
>
|
||||
{primaryButton?.text ?? 'Ya'}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, useId, useState } from 'react';
|
||||
|
||||
import ConfirmationModal, {
|
||||
ConfirmationModalProps,
|
||||
} from '@/components/modal/ConfirmationModal';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
interface ConfirmationModalWithNotesProps
|
||||
extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
|
||||
rows?: number;
|
||||
placeholder?: string;
|
||||
|
||||
primaryButton?: {
|
||||
text?: string;
|
||||
color?: Color;
|
||||
isLoading?: boolean;
|
||||
onClick?: (notes: string) => void;
|
||||
};
|
||||
}
|
||||
|
||||
const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
|
||||
ref,
|
||||
type = 'info',
|
||||
text,
|
||||
closeOnBackdrop,
|
||||
primaryButton,
|
||||
secondaryButton,
|
||||
className,
|
||||
rows = 3,
|
||||
placeholder = 'Catatan...',
|
||||
}) => {
|
||||
const randomId = useId();
|
||||
const [notes, setNotes] = useState('');
|
||||
|
||||
const notesChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
|
||||
setNotes(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfirmationModal
|
||||
ref={ref}
|
||||
type={type}
|
||||
text={text}
|
||||
closeOnBackdrop={closeOnBackdrop}
|
||||
primaryButton={{
|
||||
...primaryButton,
|
||||
onClick: () => {
|
||||
primaryButton?.onClick?.(notes);
|
||||
setNotes('');
|
||||
},
|
||||
}}
|
||||
secondaryButton={secondaryButton}
|
||||
className={className}
|
||||
>
|
||||
<TextArea
|
||||
name={randomId}
|
||||
placeholder={placeholder}
|
||||
value={notes}
|
||||
onChange={notesChangeHandler}
|
||||
rows={rows}
|
||||
/>
|
||||
</ConfirmationModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmationModalWithNotes;
|
||||
@@ -3,33 +3,11 @@ import Steps from '@/components/steps/Steps';
|
||||
import StepItem from '@/components/steps/StepItem';
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import {
|
||||
BaseApiResponse,
|
||||
BaseApproval,
|
||||
BaseGroupedApproval,
|
||||
} from '@/types/api/api-general';
|
||||
import { ApprovalLine } from '@/types/config/constant';
|
||||
import useSWR from 'swr';
|
||||
import { httpClientFetcher } from '@/services/http/client';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
|
||||
|
||||
export type ApprovalStepLog = {
|
||||
action: string;
|
||||
action_by?: string;
|
||||
date?: string;
|
||||
notes?: string | null;
|
||||
};
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { ApprovalsLine } from '@/types/api/api-general';
|
||||
|
||||
interface ApprovalStepsProps {
|
||||
approvals: {
|
||||
name?: string;
|
||||
status: ApprovalStepStatus;
|
||||
logs?: ApprovalStepLog[];
|
||||
}[];
|
||||
approvals: ApprovalsLine;
|
||||
}
|
||||
|
||||
const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
||||
@@ -37,104 +15,45 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
||||
<Steps direction='vertical' className='w-full md:steps-horizontal'>
|
||||
{approvals.map((approval, idx) => {
|
||||
const stepItemColor =
|
||||
approval.status === 'APPROVED'
|
||||
approval.status === 'approved'
|
||||
? 'success'
|
||||
: approval.status === 'REJECTED'
|
||||
? 'error'
|
||||
: approval.status === 'WAITING'
|
||||
? 'warning'
|
||||
: undefined;
|
||||
: approval.status === 'rejected'
|
||||
? 'error'
|
||||
: undefined;
|
||||
|
||||
const stepItemIcon =
|
||||
approval.status === 'APPROVED'
|
||||
approval.status === 'approved'
|
||||
? 'material-symbols:check-rounded'
|
||||
: approval.status === 'REJECTED'
|
||||
? 'material-symbols:close-rounded'
|
||||
: approval.status === 'WAITING'
|
||||
? 'pajamas:dash-circle'
|
||||
: approval.logs && approval.logs.length > 0
|
||||
? 'material-symbols:info-outline-rounded'
|
||||
: 'bxs:hourglass';
|
||||
: approval.status === 'rejected'
|
||||
? 'material-symbols:close-rounded'
|
||||
: 'bxs:hourglass';
|
||||
|
||||
return (
|
||||
<StepItem
|
||||
key={idx}
|
||||
color={stepItemColor}
|
||||
icon={
|
||||
<Tooltip
|
||||
color={stepItemColor}
|
||||
position='right'
|
||||
className={{
|
||||
wrapper: 'md:tooltip-bottom',
|
||||
content: 'p-0 rounded overflow-hidden',
|
||||
}}
|
||||
content={
|
||||
<>
|
||||
{approval.logs && approval.logs.length > 0 && (
|
||||
<div className='flex flex-col gap-0'>
|
||||
{approval.logs?.map((approvalLog, logIdx) => {
|
||||
const action =
|
||||
approvalLog.action === 'CREATED'
|
||||
? 'Dibuat'
|
||||
: approvalLog.action === 'UPDATED'
|
||||
? 'Diperbarui'
|
||||
: approvalLog.action === 'APPROVED'
|
||||
? 'Disetujui'
|
||||
: approvalLog.action === 'REJECTED'
|
||||
? 'Ditolak'
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={logIdx}
|
||||
className={cn(
|
||||
'p-2 flex flex-col text-base text-start',
|
||||
{
|
||||
'bg-success text-success-content':
|
||||
approvalLog.action === 'APPROVED',
|
||||
'bg-error text-error-content':
|
||||
approvalLog.action === 'REJECTED',
|
||||
'bg-info text-info-content':
|
||||
approvalLog.action === 'CREATED',
|
||||
'bg-warning text-warning-content':
|
||||
approvalLog.action === 'UPDATED',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{approvalLog.date && (
|
||||
<span>
|
||||
{formatDate(
|
||||
approvalLog.date,
|
||||
'YYYY-MM-DD, HH:mm:ss'
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<span>Aksi: {action}</span>
|
||||
<span>Oleh: {approvalLog.action_by ?? '-'}</span>
|
||||
<span>Catatan: {approvalLog.notes ?? '-'}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
icon={stepItemIcon}
|
||||
width={24}
|
||||
height={24}
|
||||
className={cn({
|
||||
invisible:
|
||||
approval.status === 'IDLE' &&
|
||||
(!approval.logs ||
|
||||
(approval.logs && approval.logs.length === 0)),
|
||||
})}
|
||||
/>
|
||||
</Tooltip>
|
||||
approval.status !== 'waiting' && (
|
||||
<Tooltip
|
||||
color={stepItemColor}
|
||||
position='right'
|
||||
className={{
|
||||
wrapper: 'md:tooltip-bottom',
|
||||
}}
|
||||
content={
|
||||
<div className='flex flex-col text-base'>
|
||||
<span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
|
||||
<span>Oleh: {approval.action_by}</span>
|
||||
<span>Catatan: {approval.notes}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon icon={stepItemIcon} width={24} height={24} />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
>
|
||||
{approval.name}
|
||||
{approval.role}
|
||||
</StepItem>
|
||||
);
|
||||
})}
|
||||
@@ -142,267 +61,4 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const formatGroupedApprovalsToApprovalSteps = (
|
||||
approvalLine: ApprovalLine,
|
||||
groupedApprovals: BaseGroupedApproval[],
|
||||
latestApproval: BaseApproval
|
||||
): ApprovalStepsProps['approvals'] => {
|
||||
const formattedApprovalSteps: ApprovalStepsProps['approvals'] =
|
||||
approvalLine.map((approvalLineItem) => {
|
||||
const approvalGroup = groupedApprovals.find(
|
||||
(approvalGroupItem) =>
|
||||
approvalGroupItem.step_number === approvalLineItem.step_number
|
||||
);
|
||||
|
||||
const currentStepNumber = approvalLineItem.step_number;
|
||||
const lastStepNumber =
|
||||
groupedApprovals[groupedApprovals.length - 1]?.step_number;
|
||||
|
||||
const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
|
||||
|
||||
if (!approvalGroup && currentStepNumber <= lastStepNumber) {
|
||||
throw new Error(
|
||||
`Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
|
||||
);
|
||||
}
|
||||
|
||||
if (!approvalGroup) {
|
||||
const isWaiting = currentStepNumber === latestApproval.step_number + 1;
|
||||
const isPreviousApprovalRejected =
|
||||
groupedApprovals[groupedApprovals.length - 1].approvals[0].action ===
|
||||
'REJECTED';
|
||||
|
||||
return {
|
||||
name: approvalLineItem.step_name,
|
||||
status: isPreviousApprovalRejected
|
||||
? 'IDLE'
|
||||
: isWaiting
|
||||
? 'WAITING'
|
||||
: 'IDLE',
|
||||
};
|
||||
}
|
||||
|
||||
let approvalStatus: ApprovalStepStatus = 'IDLE';
|
||||
|
||||
if (approvalGroup.step_number <= latestApproval.step_number) {
|
||||
if (approvalGroup.approvals) {
|
||||
switch (approvalGroup?.approvals[0]?.action) {
|
||||
case 'CREATED':
|
||||
case 'UPDATED':
|
||||
case 'APPROVED':
|
||||
approvalStatus = 'APPROVED';
|
||||
break;
|
||||
|
||||
case 'REJECTED':
|
||||
approvalStatus = 'REJECTED';
|
||||
break;
|
||||
|
||||
default:
|
||||
approvalStatus = 'IDLE';
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
approvalGroup.step_number === latestApproval.step_number + 1 &&
|
||||
!isLatestApprovalRejected
|
||||
) {
|
||||
approvalStatus = 'WAITING';
|
||||
} else {
|
||||
approvalStatus = 'IDLE';
|
||||
}
|
||||
|
||||
const approvalLogs: ApprovalStepLog[] = approvalGroup.approvals
|
||||
? approvalGroup.approvals.map((approval) => ({
|
||||
action_by: approval.action_by.name,
|
||||
date: approval.action_at,
|
||||
notes: approval.notes,
|
||||
action: approval.action,
|
||||
}))
|
||||
: [];
|
||||
|
||||
return {
|
||||
name: approvalGroup.step_name,
|
||||
status: approvalStatus,
|
||||
logs: approvalLogs,
|
||||
};
|
||||
});
|
||||
|
||||
return formattedApprovalSteps;
|
||||
};
|
||||
|
||||
export default ApprovalSteps;
|
||||
|
||||
/**
|
||||
* Mengubah array BaseApproval (datar) menjadi BaseGroupedApproval (berkelompok).
|
||||
*/
|
||||
const groupApprovalsByStep = (
|
||||
approvals: BaseApproval[]
|
||||
): BaseGroupedApproval[] => {
|
||||
const groups: Record<number, BaseGroupedApproval> = {};
|
||||
for (const approval of approvals) {
|
||||
if (!groups[approval.step_number]) {
|
||||
groups[approval.step_number] = {
|
||||
step_number: approval.step_number,
|
||||
step_name: approval.step_name,
|
||||
approvals: [],
|
||||
};
|
||||
}
|
||||
groups[approval.step_number].approvals.push(approval);
|
||||
}
|
||||
return Object.values(groups);
|
||||
};
|
||||
|
||||
/**
|
||||
* Mengubah array BaseGroupedApproval (berkelompok) kembali menjadi BaseApproval[] (datar).
|
||||
*/
|
||||
const flattenGroupedApprovals = (
|
||||
groupedApprovals: BaseGroupedApproval[]
|
||||
): BaseApproval[] => {
|
||||
return groupedApprovals.flatMap((group) => group.approvals);
|
||||
};
|
||||
|
||||
/**
|
||||
* Type guard untuk memeriksa apakah data adalah BaseGroupedApproval[].
|
||||
*/
|
||||
const isGroupedApprovalData = (
|
||||
data: BaseApproval[] | BaseGroupedApproval[]
|
||||
): data is BaseGroupedApproval[] => {
|
||||
if (!data || data.length === 0) {
|
||||
return true;
|
||||
}
|
||||
const firstElement = data[0];
|
||||
return (
|
||||
typeof firstElement === 'object' &&
|
||||
firstElement !== null &&
|
||||
'approvals' in firstElement &&
|
||||
Array.isArray(firstElement.approvals)
|
||||
);
|
||||
};
|
||||
|
||||
const useApprovalSteps = ({
|
||||
latestApproval,
|
||||
approvalLines,
|
||||
moduleName,
|
||||
moduleId,
|
||||
params,
|
||||
}: {
|
||||
latestApproval: BaseApproval | undefined;
|
||||
approvalLines: ApprovalLine;
|
||||
moduleName: string;
|
||||
moduleId: string;
|
||||
params?: {
|
||||
page?: number;
|
||||
limit: number;
|
||||
search?: string;
|
||||
group_step_number?: boolean;
|
||||
};
|
||||
}) => {
|
||||
// Membuat URL Parameters
|
||||
const paramString = new URLSearchParams({
|
||||
page: params?.page?.toString() || '',
|
||||
limit: params?.limit?.toString() || '',
|
||||
search: params?.search || '',
|
||||
}).toString();
|
||||
|
||||
// fetching data approvals
|
||||
const SWR_KEY_APPROVALS =
|
||||
moduleName && moduleId
|
||||
? `/approvals?module_name=${moduleName}&module_id=${moduleId}${
|
||||
params ? `&${paramString}` : ''
|
||||
}`
|
||||
: null;
|
||||
|
||||
const {
|
||||
data: approvalData,
|
||||
isLoading: approvalIsLoading,
|
||||
mutate: mutateApprovals,
|
||||
} = useSWR(SWR_KEY_APPROVALS, async (url) => {
|
||||
return await httpClientFetcher<
|
||||
BaseApiResponse<BaseApproval[] | BaseGroupedApproval[]>
|
||||
>(url);
|
||||
});
|
||||
|
||||
// Fungsi Refresh
|
||||
const refresh = useCallback(async () => {
|
||||
await mutateApprovals();
|
||||
}, [mutateApprovals]);
|
||||
|
||||
const { groupedApprovals } = useMemo(() => {
|
||||
const rawData = isResponseSuccess(approvalData)
|
||||
? approvalData.data
|
||||
: undefined;
|
||||
|
||||
let processedGroupedApprovals: BaseGroupedApproval[] = [];
|
||||
|
||||
if (rawData) {
|
||||
if (isGroupedApprovalData(rawData)) {
|
||||
processedGroupedApprovals = rawData;
|
||||
} else {
|
||||
processedGroupedApprovals = groupApprovalsByStep(
|
||||
rawData as BaseApproval[]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
groupedApprovals: processedGroupedApprovals,
|
||||
};
|
||||
}, [approvalData]);
|
||||
|
||||
const isLoading = approvalIsLoading;
|
||||
|
||||
// Formatting Akhir
|
||||
const approvals = useMemo(() => {
|
||||
if (isLoading || !approvalLines.length || !latestApproval) {
|
||||
return [];
|
||||
}
|
||||
try {
|
||||
return formatGroupedApprovalsToApprovalSteps(
|
||||
approvalLines,
|
||||
groupedApprovals,
|
||||
latestApproval
|
||||
);
|
||||
} catch (error) {
|
||||
console.warn('Gagal memformat approval steps:', error);
|
||||
return [];
|
||||
}
|
||||
}, [isLoading, approvalLines, groupedApprovals, latestApproval]);
|
||||
|
||||
// Raw Data Approvals
|
||||
const rawDataApprovals = useMemo(() => {
|
||||
const rawData = isResponseSuccess(approvalData)
|
||||
? approvalData.data
|
||||
: undefined;
|
||||
|
||||
if (!rawData) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const isDataCurrentlyGrouped = isGroupedApprovalData(rawData);
|
||||
const wantsGrouped = params?.group_step_number !== false;
|
||||
|
||||
if (wantsGrouped) {
|
||||
if (isDataCurrentlyGrouped) {
|
||||
return rawData as BaseGroupedApproval[];
|
||||
} else {
|
||||
return groupApprovalsByStep(rawData as BaseApproval[]);
|
||||
}
|
||||
} else {
|
||||
if (isDataCurrentlyGrouped) {
|
||||
return flattenGroupedApprovals(rawData as BaseGroupedApproval[]);
|
||||
} else {
|
||||
return rawData as BaseApproval[];
|
||||
}
|
||||
}
|
||||
}, [approvalData, params?.group_step_number]);
|
||||
|
||||
// Return Hook
|
||||
return {
|
||||
approvals,
|
||||
isLoading,
|
||||
rawDataApprovals: rawDataApprovals,
|
||||
refresh,
|
||||
};
|
||||
};
|
||||
|
||||
export { useApprovalSteps };
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
import Tabs from '@/components/Tabs';
|
||||
import ExpenseRequestContent from '@/components/pages/expense/ExpenseRequestContent';
|
||||
import ExpenseRealizationContent from '@/components/pages/expense/ExpenseRealizationContent';
|
||||
|
||||
import { Expense } from '@/types/api/expense';
|
||||
|
||||
interface ExpenseDetailProps {
|
||||
initialValues?: Expense;
|
||||
}
|
||||
|
||||
const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
|
||||
const [activeTab, setActiveTab] = useState<string>('request');
|
||||
|
||||
const expenseDetailTabs = useMemo(() => {
|
||||
const validTabs = [
|
||||
{
|
||||
id: 'request',
|
||||
label: 'Pengajuan',
|
||||
content: <ExpenseRequestContent initialValues={initialValues} />,
|
||||
},
|
||||
];
|
||||
|
||||
if (
|
||||
initialValues?.latest_approval &&
|
||||
initialValues?.latest_approval.step_number >= 4 &&
|
||||
initialValues.latest_approval.action !== 'REJECTED'
|
||||
) {
|
||||
validTabs.push({
|
||||
id: 'realization',
|
||||
label: 'Realisasi',
|
||||
content: <ExpenseRealizationContent initialValues={initialValues} />,
|
||||
});
|
||||
}
|
||||
|
||||
return validTabs;
|
||||
}, [initialValues]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-7xl pb-16'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/expense'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<h1 className='text-2xl font-bold text-center'>
|
||||
Detail Biaya Operasional
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<Tabs
|
||||
activeTabId={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
tabs={expenseDetailTabs}
|
||||
variant='lifted'
|
||||
className={{
|
||||
wrapper: 'max-w-5xl mx-auto mt-4',
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseDetail;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user