mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Rivaldi A N S
|
fa32995802 |
@@ -42,6 +42,3 @@ next-env.d.ts
|
||||
|
||||
# idea
|
||||
.idea
|
||||
|
||||
# claude
|
||||
.claude
|
||||
|
||||
+69
-182
@@ -1,189 +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" = "staging" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-STAGING"
|
||||
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_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'
|
||||
NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
|
||||
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
|
||||
|
||||
# ====== STAGING (Branch staging) ======
|
||||
build:staging:
|
||||
<<: *build_template
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == "staging"'
|
||||
environment:
|
||||
name: staging
|
||||
variables:
|
||||
NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
|
||||
NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
|
||||
NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
|
||||
NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
|
||||
|
||||
deploy:staging:
|
||||
<<: *deploy_template
|
||||
needs: ['build:staging']
|
||||
rules:
|
||||
- if: '$CI_COMMIT_BRANCH == "staging"'
|
||||
variables:
|
||||
S3_BUCKET: 'stg-lti-erp.mbugroup.id'
|
||||
AWS_REGION: 'ap-southeast-3'
|
||||
CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
|
||||
environment:
|
||||
name: staging
|
||||
url: https://stg-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",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -3,7 +3,6 @@ import type { NextConfig } from 'next';
|
||||
const nextConfig: NextConfig = {
|
||||
output: 'export',
|
||||
images: { unoptimized: true },
|
||||
trailingSlash: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Generated
+73
-907
File diff suppressed because it is too large
Load Diff
+7
-12
@@ -7,31 +7,25 @@
|
||||
"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",
|
||||
"jspdf": "^3.0.4",
|
||||
"jspdf-autotable": "^5.0.2",
|
||||
"inputmask": "^5.0.9",
|
||||
"moment": "^2.30.1",
|
||||
"next": "15.5.9",
|
||||
"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",
|
||||
"swr": "^2.3.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"use-debounce": "^10.0.6",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
|
||||
"yup": "^1.7.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
@@ -39,14 +33,15 @@
|
||||
"@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",
|
||||
"daisyui": "^5.5.8",
|
||||
"daisyui": "^5.1.12",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "^15.5.7",
|
||||
"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 SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,69 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import ClosingDetail from '@/components/pages/closing/ClosingDetail';
|
||||
|
||||
import { ClosingApi } from '@/services/api/closing';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const ClosingDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const closingId = searchParams.get('closingId');
|
||||
|
||||
const { data: closing, isLoading: isLoadingClosing } = useSWR(
|
||||
closingId,
|
||||
(id: number) => ClosingApi.getGeneralInfo(id)
|
||||
);
|
||||
|
||||
const { data: salesData, isLoading: isLoadingSales } = useSWR(
|
||||
closingId ? `sales-${closingId}` : null,
|
||||
() => ClosingApi.getPenjualan(Number(closingId))
|
||||
);
|
||||
|
||||
const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
|
||||
closingId ? `hpp-ekspedisi-${closingId}` : null,
|
||||
() => ClosingApi.getHppEkspedisi(Number(closingId))
|
||||
);
|
||||
|
||||
if (!closingId) {
|
||||
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 (!isLoadingClosing && (!closing || isResponseError(closing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
|
||||
{!isLoading && isResponseSuccess(closing) && (
|
||||
<ClosingDetail
|
||||
id={Number(closingId)}
|
||||
initialValue={closing.data}
|
||||
salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
|
||||
hppExpeditionData={
|
||||
isResponseSuccess(hppEkspedisiData)
|
||||
? hppEkspedisiData.data
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClosingDetailPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import ClosingsTable from '@/components/pages/closing/ClosingsTable';
|
||||
|
||||
const Closing = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<ClosingsTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Closing;
|
||||
@@ -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;
|
||||
+24
-46
@@ -3,43 +3,30 @@
|
||||
@import '../styles/daisyui.css';
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: 'lti';
|
||||
name: "lti";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
color-scheme: 'light';
|
||||
|
||||
/* Primary Colors */
|
||||
--color-primary: oklch(39.4% 0.177 301.9);
|
||||
--color-primary-content: oklch(87.5% 0.038 274.5);
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary: oklch(60.1% 0.258 335.7);
|
||||
--color-secondary-content: oklch(99.4% 0.007 337.8);
|
||||
|
||||
/* Accent Colors */
|
||||
--color-accent: oklch(76.2% 0.155 170.8);
|
||||
--color-accent-content: oklch(7.2% 0.007 167.6);
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-neutral: oklch(22.4% 0.032 258.8);
|
||||
--color-neutral-content: oklch(87.7% 0.016 257);
|
||||
|
||||
/* Base Colors */
|
||||
--color-base-100: oklch(100% 0 0); /* #ffffff */
|
||||
--color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
|
||||
--color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
|
||||
--color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
|
||||
|
||||
/* Status/Utility Colors */
|
||||
--color-info: oklch(67.4% 0.176 238.9);
|
||||
--color-info-content: oklch(0% 0 0); /* #000000 */
|
||||
--color-success: oklch(62.3% 0.147 149);
|
||||
--color-success-content: oklch(100% 0 0); /* #ffffff */
|
||||
--color-warning: oklch(82.2% 0.165 91.9);
|
||||
--color-warning-content: oklch(0% 0 0); /* #000000 */
|
||||
--color-error: oklch(61.8% 0.203 27.8);
|
||||
--color-error-content: oklch(100% 0 0); /* #fffffff */
|
||||
|
||||
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);
|
||||
--color-base-content: oklch(22.389% 0.031 278.072);
|
||||
--color-primary: oklch(60% 0.126 221.723);
|
||||
--color-primary-content: oklch(100% 0 0);
|
||||
--color-secondary: oklch(52% 0.105 223.128);
|
||||
--color-secondary-content: oklch(100% 0 0);
|
||||
--color-accent: oklch(45% 0.085 224.283);
|
||||
--color-accent-content: oklch(100% 0 0);
|
||||
--color-neutral: oklch(39% 0.07 227.392);
|
||||
--color-neutral-content: oklch(100% 0 0);
|
||||
--color-info: oklch(58% 0.158 241.966);
|
||||
--color-info-content: oklch(100% 0 0);
|
||||
--color-success: oklch(62% 0.194 149.214);
|
||||
--color-success-content: oklch(100% 0 0);
|
||||
--color-warning: oklch(85% 0.199 91.936);
|
||||
--color-warning-content: oklch(0% 0 0);
|
||||
--color-error: oklch(57% 0.245 27.325);
|
||||
--color-error-content: oklch(100% 0 0);
|
||||
--radius-selector: 0rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.25rem;
|
||||
@@ -50,25 +37,16 @@
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--color-primary: #1f74bf;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-inter: var(--font-inter);
|
||||
|
||||
--container-sm: 40rem;
|
||||
--container-md: 48rem;
|
||||
--container-lg: 64rem;
|
||||
--container-xl: 80rem;
|
||||
--container-2xl: 96rem;
|
||||
}
|
||||
|
||||
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,11 +7,12 @@ 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(window.history.state);
|
||||
const state = window.history.state?.usr as
|
||||
| { inventoryAdjustment?: InventoryAdjustment }
|
||||
| undefined;
|
||||
@@ -23,17 +24,20 @@ const DetailInventoryAdjustment = () => {
|
||||
}, [router]);
|
||||
|
||||
const finalData = inventoryAdjustment;
|
||||
|
||||
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,50 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import InventoryProductDetail from '@/components/pages/inventory/product/detail/InventoryProductDetail';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { InventoryProductApi } from '@/services/api/inventory';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const InventoryProductDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const inventoryProductId = searchParams.get('inventoryProductId');
|
||||
|
||||
const { data: inventoryProduct, isLoading: isLoadingInventoryProduct } =
|
||||
useSWR(inventoryProductId, (id: number) =>
|
||||
InventoryProductApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!inventoryProductId) {
|
||||
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 (
|
||||
!isLoadingInventoryProduct &&
|
||||
(!inventoryProduct || isResponseError(inventoryProduct))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='size-full'>
|
||||
{isLoadingInventoryProduct && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingInventoryProduct && isResponseSuccess(inventoryProduct) && (
|
||||
<InventoryProductDetail inventoryProduct={inventoryProduct.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryProductDetailPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import InventoryProductTable from '@/components/pages/inventory/product/InventoryProductTable';
|
||||
|
||||
const InventoryProductPage = () => {
|
||||
return (
|
||||
<div className='size-full'>
|
||||
<InventoryProductTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryProductPage;
|
||||
@@ -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,11 +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 (
|
||||
|
||||
+7
-25
@@ -1,29 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { redirectToSSO } from '@/lib/auth-helper';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
export default function Home() {
|
||||
const { user, isLoadingUser } = useAuth();
|
||||
redirect('/dashboard');
|
||||
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
if (pathname === '/') {
|
||||
router.replace('/dashboard');
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
if (isLoadingUser) {
|
||||
return (
|
||||
<main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
|
||||
<span className='loading loading-spinner loading-lg'></span>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return <>Loading...</>;
|
||||
return (
|
||||
<main className='w-full h-full min-h-screen flex flex-row justify-center items-center'>
|
||||
<h1>LTI ERP</h1>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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,21 +1,13 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
|
||||
import React, { useImperativeHandle } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
|
||||
|
||||
const AddProjectFlock = () => {
|
||||
// useImperativeHandle(ref, () => ({
|
||||
// validate() {
|
||||
// toast.success('Validating');
|
||||
// return false;
|
||||
// },
|
||||
// }));
|
||||
return (
|
||||
<section className='w-full 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='size-full'>
|
||||
{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'>
|
||||
<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'>
|
||||
<ChickinTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
export default Chickin;
|
||||
@@ -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,63 +0,0 @@
|
||||
'use client';
|
||||
import ProjectFlockClosingForm from '@/components/pages/production/project-flock/closing/ProjectFlockClosingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const ProjectFlockClosingPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
const projectFlockKandangId = searchParams.get('projectFlockKandangId');
|
||||
|
||||
const { data: projectFlockKandang, isLoading: isLoadingProjectFlockKandang } =
|
||||
useSWR(`get-flock-kandang-id/${projectFlockKandangId}`, () =>
|
||||
ProjectFlockKandangApi.getSingle(parseInt(projectFlockKandangId ?? ''))
|
||||
);
|
||||
|
||||
const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
|
||||
`get-flock-id/${projectFlockId}`,
|
||||
() => ProjectFlockApi.getSingle(parseInt(projectFlockId ?? ''))
|
||||
);
|
||||
|
||||
if (!projectFlockId || !projectFlockKandangId) {
|
||||
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)) &&
|
||||
!isLoadingProjectFlockKandang &&
|
||||
(!projectFlockKandang || isResponseError(projectFlockKandang))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col justify-center'>
|
||||
{isLoadingProjectFlock ||
|
||||
(isLoadingProjectFlockKandang && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
))}
|
||||
{isResponseSuccess(projectFlock) &&
|
||||
isResponseSuccess(projectFlockKandang) && (
|
||||
<ProjectFlockClosingForm
|
||||
projectFlock={projectFlock.data}
|
||||
projectFlockKandang={projectFlockKandang.data}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectFlockClosingPage;
|
||||
@@ -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 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;
|
||||
@@ -1,13 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import ProjectFlockDetail from '@/components/pages/production/project-flock/detail/ProjectFlockDetail';
|
||||
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';
|
||||
|
||||
const ProjectFlockDetailPage = () => {
|
||||
const ProjectFlockDetail = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
@@ -38,17 +37,15 @@ const ProjectFlockDetailPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full 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) && (
|
||||
<ProjectFlockDetail projectFlock={projectFlock.data} />
|
||||
{!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectFlockDetailPage;
|
||||
ProjectFlockDetail;
|
||||
ProjectFlockDetail;
|
||||
export default ProjectFlockDetail;
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import Drawer from '@/components/Drawer';
|
||||
import React, { ReactNode } from 'react';
|
||||
import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
|
||||
export default function ProjectFlockLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const toggleValidate = useUiStore((s) => s.toggleValidate);
|
||||
|
||||
const isAdd = pathname.includes('/add');
|
||||
const isEdit = pathname.includes('/detail/edit');
|
||||
const isDetail = pathname.includes('/detail');
|
||||
const isChickin = pathname.includes('/chickin/add/kandang');
|
||||
const isClosing = pathname.includes('/closing');
|
||||
|
||||
const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
|
||||
|
||||
const handleBackdropClick = () => {
|
||||
const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
|
||||
if (isValid) {
|
||||
unsub(); // berhenti listen
|
||||
router.push('/production/project-flock');
|
||||
}
|
||||
});
|
||||
|
||||
toggleValidate();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* List page always rendered */}
|
||||
<div className='min-h-sceen w-full relative'>
|
||||
<ProjectFlockTable
|
||||
refresh={() => !isOpen && router.push('/production/project-flock')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Render Drawer only on /add */}
|
||||
<Drawer
|
||||
open={isOpen}
|
||||
setOpen={(v) => {
|
||||
if (!v) router.push('/production/project-flock');
|
||||
}}
|
||||
closeOnBackdropClick={isDetail ? true : false}
|
||||
onBackdropClick={handleBackdropClick}
|
||||
variant='right'
|
||||
zIndex='99999'
|
||||
sidebarContent={isOpen && <div className=''>{children}</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='size-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;
|
||||
@@ -14,7 +14,7 @@ const RecordingEdit = () => {
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId,
|
||||
(id: string) => RecordingApi.getSingle(parseInt(id))
|
||||
(id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
|
||||
);
|
||||
|
||||
if (!recordingId) {
|
||||
|
||||
@@ -14,7 +14,7 @@ const RecordingDetail = () => {
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId,
|
||||
(id: string) => RecordingApi.getSingle(parseInt(id))
|
||||
(id: number) => RecordingApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!recordingId) {
|
||||
|
||||
@@ -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;
|
||||
@@ -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,5 +0,0 @@
|
||||
const ReportExpenseDetail = () => {
|
||||
return <div>ReportExpenseDetail</div>;
|
||||
};
|
||||
|
||||
export default ReportExpenseDetail;
|
||||
@@ -1,13 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
|
||||
|
||||
const ReportExpense = () => {
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
<ReportExpenseTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportExpense;
|
||||
@@ -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,7 +0,0 @@
|
||||
import LogisticStockTabs from '@/components/pages/report/logistic-stock/LogisticStockTabs';
|
||||
|
||||
const LogisticStock = () => {
|
||||
return <LogisticStockTabs />;
|
||||
};
|
||||
|
||||
export default LogisticStock;
|
||||
@@ -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 MarketingReportContent from '@/components/pages/report/MarketingReportContent';
|
||||
|
||||
const MarketingReportPage = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<MarketingReportContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketingReportPage;
|
||||
@@ -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 '@/components/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
|
||||
);
|
||||
|
||||
|
||||
+8
-103
@@ -10,102 +10,28 @@ interface DrawerProps {
|
||||
open: boolean;
|
||||
setOpen: (newOpenState: boolean) => void;
|
||||
openOnLarge?: boolean;
|
||||
variant?: 'sidebar' | 'left' | 'right';
|
||||
zIndex?: string;
|
||||
className?: DrawerClassName;
|
||||
onBackdropClick?: () => void;
|
||||
closeOnBackdropClick?: boolean;
|
||||
}
|
||||
|
||||
type DrawerClassName = {
|
||||
drawer?: string;
|
||||
drawerContent?: string;
|
||||
drawerSide?: string;
|
||||
drawerOverlay?: string;
|
||||
drawerSidebarContent?: string;
|
||||
};
|
||||
|
||||
const Drawer = ({
|
||||
children,
|
||||
sidebarContent,
|
||||
open,
|
||||
setOpen,
|
||||
openOnLarge,
|
||||
variant = 'sidebar',
|
||||
zIndex = '20',
|
||||
className,
|
||||
onBackdropClick,
|
||||
closeOnBackdropClick = true,
|
||||
}: DrawerProps) => {
|
||||
const getDrawerClassNames = (): DrawerClassName => {
|
||||
const baseClassNames = {
|
||||
drawer: 'drawer',
|
||||
drawerContent: 'drawer-content',
|
||||
drawerSide: 'drawer-side',
|
||||
drawerOverlay: 'drawer-overlay',
|
||||
drawerSidebarContent: 'min-h-full bg-base-100',
|
||||
};
|
||||
|
||||
if (variant === 'sidebar') {
|
||||
return {
|
||||
...baseClassNames,
|
||||
drawerSidebarContent: cn(
|
||||
baseClassNames.drawerSidebarContent,
|
||||
'w-full max-w-[300px] lg:w-[300px]'
|
||||
),
|
||||
};
|
||||
} else if (variant === 'right') {
|
||||
return {
|
||||
...baseClassNames,
|
||||
drawer: cn(baseClassNames.drawer, 'drawer-end'),
|
||||
drawerSide: cn(
|
||||
baseClassNames.drawerSide,
|
||||
'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
|
||||
),
|
||||
drawerSidebarContent: cn(
|
||||
baseClassNames.drawerSidebarContent,
|
||||
'w-full min-w-120 sm:w-fit'
|
||||
),
|
||||
};
|
||||
} else if (variant === 'left') {
|
||||
return {
|
||||
...baseClassNames,
|
||||
drawerSide: cn(
|
||||
baseClassNames.drawerSide,
|
||||
'border-l border-solid border-gray-200 drawer-side w-screen top-0 right-0 fixed z-21'
|
||||
),
|
||||
drawerSidebarContent: cn(
|
||||
baseClassNames.drawerSidebarContent,
|
||||
'w-full min-w-120 sm:w-fit'
|
||||
),
|
||||
};
|
||||
}
|
||||
return baseClassNames; // Fallback for default or unknown variant
|
||||
};
|
||||
|
||||
const varianClassName = getDrawerClassNames();
|
||||
|
||||
const toggleDrawer = () => {
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const closeDrawer = () => {
|
||||
if (closeOnBackdropClick) {
|
||||
setOpen(false);
|
||||
}
|
||||
onBackdropClick && onBackdropClick();
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'drawer',
|
||||
{
|
||||
'lg:drawer-open': openOnLarge,
|
||||
},
|
||||
varianClassName?.drawer,
|
||||
className?.drawer
|
||||
)}
|
||||
className={cn('drawer', {
|
||||
'lg:drawer-open': openOnLarge,
|
||||
})}
|
||||
>
|
||||
<input
|
||||
type='checkbox'
|
||||
@@ -114,37 +40,16 @@ const Drawer = ({
|
||||
className='drawer-toggle'
|
||||
/>
|
||||
|
||||
{/* Drawer Content */}
|
||||
<div
|
||||
className={cn(varianClassName?.drawerContent, className?.drawerContent)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<div className='drawer-content'>{children}</div>
|
||||
|
||||
{/* Drawer Side */}
|
||||
<div
|
||||
className={cn(
|
||||
varianClassName?.drawerSide,
|
||||
className?.drawerSide,
|
||||
zIndex
|
||||
)}
|
||||
>
|
||||
<div className='drawer-side border-r border-solid border-gray-200 z-20'>
|
||||
<label
|
||||
aria-label='close sidebar'
|
||||
className={cn(
|
||||
varianClassName?.drawerOverlay,
|
||||
className?.drawerOverlay
|
||||
)}
|
||||
className='drawer-overlay'
|
||||
onClick={closeDrawer}
|
||||
/>
|
||||
|
||||
{/* Sidebar Content */}
|
||||
<div
|
||||
className={cn(
|
||||
varianClassName?.drawerSidebarContent,
|
||||
className?.drawerContent
|
||||
)}
|
||||
>
|
||||
<div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
|
||||
{sidebarContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
import React, { ReactNode, useState, useRef } from 'react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface DropdownProps {
|
||||
trigger: ReactNode;
|
||||
children: ReactNode;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
trigger?: string;
|
||||
content?: string;
|
||||
};
|
||||
align?: 'start' | 'center' | 'end';
|
||||
direction?: 'top' | 'bottom' | 'left' | 'right';
|
||||
hover?: boolean;
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
close?: boolean;
|
||||
controlled?: boolean;
|
||||
}
|
||||
|
||||
const Dropdown = ({
|
||||
trigger,
|
||||
children,
|
||||
className,
|
||||
align,
|
||||
direction,
|
||||
hover,
|
||||
defaultOpen = false,
|
||||
open,
|
||||
close,
|
||||
controlled = false,
|
||||
}: DropdownProps) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (!controlled) {
|
||||
const newState = !isOpen;
|
||||
setIsOpen(newState);
|
||||
}
|
||||
};
|
||||
|
||||
const getWrapperClasses = () => {
|
||||
const openState = controlled ? open : isOpen;
|
||||
|
||||
return cn(
|
||||
'dropdown',
|
||||
{
|
||||
'dropdown-start': align === 'start',
|
||||
'dropdown-center': align === 'center',
|
||||
'dropdown-end': align === 'end',
|
||||
'dropdown-top': direction === 'top',
|
||||
'dropdown-bottom': direction === 'bottom',
|
||||
'dropdown-left': direction === 'left',
|
||||
'dropdown-right': direction === 'right',
|
||||
'dropdown-hover': hover,
|
||||
'dropdown-open': openState && !close,
|
||||
'dropdown-close': close,
|
||||
},
|
||||
className?.wrapper
|
||||
);
|
||||
};
|
||||
|
||||
const getTriggerClasses = () => {
|
||||
return cn(className?.trigger);
|
||||
};
|
||||
|
||||
const getContentClasses = () => {
|
||||
return cn(
|
||||
'dropdown-content z-[9999] shadow-sm bg-base-100 rounded-box',
|
||||
className?.content
|
||||
);
|
||||
};
|
||||
|
||||
if (controlled) {
|
||||
return (
|
||||
<div className={getWrapperClasses()}>
|
||||
{trigger}
|
||||
{open && !close && (
|
||||
<div tabIndex={-1} className={getContentClasses()}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className={getWrapperClasses()}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
className={getTriggerClasses()}
|
||||
onClick={toggleDropdown}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggleDropdown();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{trigger}
|
||||
</div>
|
||||
{!close && (
|
||||
<div tabIndex={-1} className={getContentClasses()}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dropdown;
|
||||
@@ -1,143 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
type FloatingActionsButtonProps = {
|
||||
actions: {
|
||||
action: 'DETAIL' | 'EDIT' | 'DELETE';
|
||||
icon: string;
|
||||
label?: string;
|
||||
onClick?: () => void;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
approvals: {
|
||||
action: 'APPROVED' | 'REJECTED';
|
||||
icon: string;
|
||||
label?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
selectedRowIds: number[];
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const FloatingActionsButton = ({
|
||||
actions,
|
||||
approvals,
|
||||
selectedRowIds,
|
||||
onClose,
|
||||
}: FloatingActionsButtonProps) => {
|
||||
// Jika tidak ada baris yang dipilih, jangan tampilkan FAB
|
||||
const positionStyles =
|
||||
selectedRowIds.length > 0
|
||||
? 'bottom-[10%] opacity-100'
|
||||
: 'bottom-[-10%] opacity-0';
|
||||
|
||||
// Helper untuk menentukan gaya warna tombol approval
|
||||
const getApprovalColor = (action: 'APPROVED' | 'REJECTED') => {
|
||||
if (action === 'APPROVED') return 'success';
|
||||
if (action === 'REJECTED') return 'error';
|
||||
return 'primary';
|
||||
};
|
||||
|
||||
const getActionColor = (action: 'DETAIL' | 'EDIT' | 'DELETE') => {
|
||||
if (action === 'DETAIL') return 'white';
|
||||
if (action === 'EDIT') return 'warning';
|
||||
if (action === 'DELETE') return 'error';
|
||||
return 'primary';
|
||||
};
|
||||
|
||||
return (
|
||||
// Container utama FAB
|
||||
<div
|
||||
className={cn(
|
||||
`absolute ${positionStyles} inset-x-1/2 -translate-x-1/2 z-50`,
|
||||
'mx-auto w-full max-w-sm sm:mx-0 bg-base-300 p-4 rounded-xl shadow-md transition-all duration-300 transform',
|
||||
'bg-slate-950 backdrop-blur-md'
|
||||
)}
|
||||
>
|
||||
<div className='flex flex-col gap-3'>
|
||||
{/* === BARIS ATAS: Status Seleksi dan Actions (Termasuk Close) === */}
|
||||
<div className='flex justify-between items-center text-white'>
|
||||
<h4 className='text-base font-semibold'>
|
||||
{selectedRowIds.length} Selected
|
||||
</h4>
|
||||
|
||||
<div className='flex flex-row gap-1 items-stretch'>
|
||||
<div className='flex gap-4 items-center'>
|
||||
{/* Render Aksi dari props.actions */}
|
||||
{actions
|
||||
.filter((action) => !action.hidden)
|
||||
.map((action, index) => {
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={action.onClick}
|
||||
className='text-white hover:text-gray-400 tooltip tooltip-bottom p-0'
|
||||
variant='link'
|
||||
disabled={action.disabled}
|
||||
>
|
||||
<Tooltip content={action.label || action.action}>
|
||||
<Icon
|
||||
icon={action.icon}
|
||||
width={20}
|
||||
height={20}
|
||||
className={`text-${getActionColor(action.action)} font-thin`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className='border-[0.5px] border-white/30 h-full'></div>
|
||||
|
||||
{/* Tombol Close */}
|
||||
<Button
|
||||
onClick={onClose}
|
||||
className='text-white hover:text-gray-400 p-0'
|
||||
variant='link'
|
||||
>
|
||||
<Tooltip content='Close'>
|
||||
<Icon icon='mdi:close' width={20} height={20} />
|
||||
</Tooltip>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* === BARIS BAWAH: Approval Buttons (Approve/Reject) === */}
|
||||
<div className={`grid grid-cols-${approvals.length} gap-3`}>
|
||||
{approvals.map((approval, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={approval.onClick}
|
||||
className={cn(
|
||||
'btn btn-lg w-full',
|
||||
'bg-white/20 border-white/30',
|
||||
'text-white/50 font-semibold flex items-center gap-2 rounded-lg transition-all duration-200',
|
||||
approval.disabled
|
||||
? 'cursor-not-allowed'
|
||||
: 'hover:text-white/100 hover:bg-white/40 hover:border-white/50'
|
||||
)}
|
||||
disabled={approval.disabled}
|
||||
>
|
||||
<Icon
|
||||
icon={approval.icon}
|
||||
width={20}
|
||||
height={20}
|
||||
className={`text-${getApprovalColor(approval.action)}`}
|
||||
/>
|
||||
{approval.label || approval.action}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloatingActionsButton;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user