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
|
ad6c25d8b6 |
@@ -42,6 +42,3 @@ next-env.d.ts
|
||||
|
||||
# idea
|
||||
.idea
|
||||
|
||||
# claude
|
||||
.claude
|
||||
|
||||
+28
-67
@@ -2,17 +2,6 @@ stages:
|
||||
- build
|
||||
- deploy
|
||||
|
||||
# ==========================================================
|
||||
# ✅ Global defaults
|
||||
# ==========================================================
|
||||
default:
|
||||
tags:
|
||||
- server-development-biznet
|
||||
interruptible: true
|
||||
|
||||
# ==========================================================
|
||||
# 🏗️ Build Template
|
||||
# ==========================================================
|
||||
.build_template: &build_template
|
||||
stage: build
|
||||
image: node:20-alpine
|
||||
@@ -26,33 +15,14 @@ default:
|
||||
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: &deploy_template
|
||||
stage: deploy
|
||||
image:
|
||||
@@ -87,8 +57,8 @@ default:
|
||||
|
||||
if [ "$CI_COMMIT_BRANCH" = "development" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-DEV"
|
||||
elif [ "$CI_COMMIT_BRANCH" = "staging" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-STAGING"
|
||||
elif [ "$CI_COMMIT_BRANCH" = "master" ]; then
|
||||
ENVIRONMENT_NAME="WEB-LTI-PROD"
|
||||
else
|
||||
ENVIRONMENT_NAME="UNKNOWN"
|
||||
fi
|
||||
@@ -96,11 +66,11 @@ default:
|
||||
if [ "$STATUS" = "success" ]; then
|
||||
COLOR=3066993
|
||||
TITLE="✅ Deployment ${ENVIRONMENT_NAME} Succeeded"
|
||||
DESC="Deployment job on branch \${CI_COMMIT_REF_NAME}\ completed successfully."
|
||||
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."
|
||||
DESC="Deployment job on branch \`${CI_COMMIT_REF_NAME}\` encountered issues."
|
||||
fi
|
||||
|
||||
jq -n \
|
||||
@@ -128,9 +98,7 @@ default:
|
||||
|
||||
curl -sS -H "Content-Type: application/json" -d @payload.json "$DISCORD_WEBHOOK_URL"
|
||||
|
||||
# ==========================================================
|
||||
# ==== DEVELOPMENT (Branch development) ======
|
||||
# ==========================================================
|
||||
# ====== DEVELOPMENT (Branch development) ======
|
||||
build:dev:
|
||||
<<: *build_template
|
||||
rules:
|
||||
@@ -138,10 +106,8 @@ build:dev:
|
||||
environment:
|
||||
name: development
|
||||
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'
|
||||
NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id'
|
||||
NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-api-sso.mbugroup.id'
|
||||
|
||||
deploy:dev:
|
||||
<<: *deploy_template
|
||||
@@ -155,31 +121,26 @@ deploy:dev:
|
||||
environment:
|
||||
name: development
|
||||
url: https://dev-lti-erp.mbugroup.id
|
||||
# ====== PRODUCTION ======
|
||||
# build:production:
|
||||
# <<: *build_template
|
||||
# rules:
|
||||
# # pilih salah satu: pakai branch master ATAU pakai tags rilis
|
||||
# - if: '$CI_COMMIT_BRANCH == "master"'
|
||||
# # - if: '$CI_COMMIT_TAG' # kalau mau rilis via tag, uncomment ini dan hapus baris di atas
|
||||
# environment:
|
||||
# name: production
|
||||
|
||||
# ==========================================================
|
||||
# ====== 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: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
|
||||
# url: https://royalgoldcapital.com
|
||||
|
||||
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
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
npm run format
|
||||
npm run lint
|
||||
npx tsc --noEmit
|
||||
npm run build
|
||||
|
||||
@@ -3,7 +3,6 @@ import type { NextConfig } from 'next';
|
||||
const nextConfig: NextConfig = {
|
||||
output: 'export',
|
||||
images: { unoptimized: true },
|
||||
trailingSlash: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Generated
+66
-3498
File diff suppressed because it is too large
Load Diff
+5
-20
@@ -15,35 +15,20 @@
|
||||
"@tanstack/match-sorter-utils": "^8.19.4",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"axios": "^1.12.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"formik": "^2.4.6",
|
||||
"input-otp": "^1.4.2",
|
||||
"jspdf": "^3.0.4",
|
||||
"jspdf-autotable": "^5.0.2",
|
||||
"lucide-react": "^0.562.0",
|
||||
"moment": "^2.30.1",
|
||||
"next": "15.5.9",
|
||||
"next-themes": "^0.4.6",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "^19.1.2",
|
||||
"next": "15.5.3",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "^19.1.2",
|
||||
"react-dom": "19.1.0",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-hook-form": "^7.70.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-number-format": "^5.4.4",
|
||||
"react-resizable-panels": "2.1.7",
|
||||
"react-select": "^5.10.2",
|
||||
"recharts": "^3.6.0",
|
||||
"sonner": "^2.0.7",
|
||||
"swr": "^2.3.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"use-debounce": "^10.0.6",
|
||||
"vaul": "^1.1.2",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
|
||||
"yup": "^1.7.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
@@ -54,9 +39,9 @@
|
||||
"@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",
|
||||
"tailwindcss": "^4",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -1,95 +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';
|
||||
import { FlockApi } from '@/services/api/master-data';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
||||
|
||||
const ClosingDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const closingId = searchParams.get('closingId');
|
||||
const kandangId = searchParams.get('kandangId'); // project flock kandang ID
|
||||
|
||||
const { data: closing, isLoading: isLoadingClosing } = useSWR(
|
||||
closingId,
|
||||
(id: number) => ClosingApi.getGeneralInfo(id)
|
||||
);
|
||||
|
||||
// WORKAROUND - get flock data from closing ID
|
||||
const { data: projectData, isLoading: isLoadingProject } = useSWR(
|
||||
`flock-${closingId}`,
|
||||
() => ProjectFlockApi.getSingle(Number(closingId))
|
||||
);
|
||||
// WORKAROUND - get kandang data from closing ID
|
||||
const { data: kandangData, isLoading: isLoadingKandang } = useSWR(
|
||||
kandangId ? `kandang-${closingId}-${kandangId}` : null,
|
||||
() => ProjectFlockKandangApi.getSingle(Number(kandangId))
|
||||
);
|
||||
|
||||
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 ||
|
||||
isLoadingProject ||
|
||||
isLoadingKandang;
|
||||
|
||||
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
|
||||
}
|
||||
projectData={
|
||||
isResponseSuccess(projectData) ? projectData.data : undefined
|
||||
}
|
||||
kandangData={
|
||||
isResponseSuccess(kandangData) ? kandangData.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 { DailyChecklistContent } from '@/figma-make/components/pages/daily-checklist/DailyChecklistContent';
|
||||
|
||||
const DailyChecklistPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<DailyChecklistContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DailyChecklistPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { Dashboard as DashboardDailyChecklist } from '@/figma-make/components/pages/dashboard/Dashboard';
|
||||
|
||||
const DailyChecklistDashboardPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<DashboardDailyChecklist />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DailyChecklistDashboardPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { DetailDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent';
|
||||
|
||||
const ListDailyChecklistDetailPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<DetailDailyChecklistContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListDailyChecklistDetailPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { ListDailyChecklistContent } from '@/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent';
|
||||
|
||||
const ListDailyChecklistPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<ListDailyChecklistContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListDailyChecklistPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { MasterAktivitasContent } from '@/figma-make/components/pages/master-data/activity/MasterAktivitasContent';
|
||||
|
||||
const MasterAktivitasPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<MasterAktivitasContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MasterAktivitasPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { MasterConfigurationContent } from '@/figma-make/components/pages/master-data/configuration/MasterConfigurationContent';
|
||||
|
||||
const MasterConfigurationPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<MasterConfigurationContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MasterConfigurationPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { MasterEmployeeContent } from '@/figma-make/components/pages/master-data/employee/MasterEmployeeContent';
|
||||
|
||||
const MasterEmployeePage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<MasterEmployeeContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MasterEmployeePage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import { DailyChecklistReportsContent } from '@/figma-make/components/pages/reports/DailyChecklistReportsContent';
|
||||
|
||||
const DailyChecklistReportsPage = () => {
|
||||
return (
|
||||
<section className='w-full'>
|
||||
<DailyChecklistReportsContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DailyChecklistReportsPage;
|
||||
@@ -1,7 +1,9 @@
|
||||
import DashboardProduction from '@/components/pages/dashboard/DashboardProduction';
|
||||
|
||||
const Dashboard = () => {
|
||||
return <DashboardProduction />;
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
@@ -34,15 +34,13 @@ const ExpenseEditPage = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const isExpenseCanBeEdited =
|
||||
const isExpenseRejectedOrApproved =
|
||||
!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);
|
||||
(expense.data.approval.action === 'REJECTED' ||
|
||||
expense.data.approval.step_number === 5);
|
||||
|
||||
if (!isLoadingExpense && !isExpenseCanBeEdited) {
|
||||
if (isExpenseRejectedOrApproved) {
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -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 === 4;
|
||||
|
||||
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;
|
||||
@@ -1,5 +0,0 @@
|
||||
const FinanceAdjust = () => {
|
||||
return <div>Finance Adjust</div>;
|
||||
};
|
||||
|
||||
export default FinanceAdjust;
|
||||
@@ -1,7 +0,0 @@
|
||||
import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
|
||||
|
||||
const FinanceAddInitialBalancePage = () => {
|
||||
return <FormFinanceAddInitialBalance type='add' />;
|
||||
};
|
||||
|
||||
export default FinanceAddInitialBalancePage;
|
||||
@@ -1,7 +0,0 @@
|
||||
import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
|
||||
|
||||
const FinanceAddInjectionPage = () => {
|
||||
return <FormFinanceInjection type='add' />;
|
||||
};
|
||||
|
||||
export default FinanceAddInjectionPage;
|
||||
@@ -1,7 +0,0 @@
|
||||
import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
|
||||
|
||||
const FinanceAddPage = () => {
|
||||
return <FormFinanceAdd />;
|
||||
};
|
||||
|
||||
export default FinanceAddPage;
|
||||
@@ -1,51 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
|
||||
|
||||
const EditFinanceInitialBalancePage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const financeId = searchParams.get('financeId');
|
||||
|
||||
const { data: finance, isLoading: isLoadingFinance } = useSWR(
|
||||
financeId,
|
||||
(id: number) => FinanceApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!financeId) {
|
||||
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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingFinance && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingFinance && (
|
||||
<FormFinanceAddInitialBalance
|
||||
type='edit'
|
||||
initialValues={isResponseSuccess(finance) ? finance.data : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFinanceInitialBalancePage;
|
||||
@@ -1,51 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import FormFinanceInjection from '@/components/pages/finance/add/injection/FormFinanceInjection';
|
||||
|
||||
const EditFinanceInjectionPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const financeId = searchParams.get('financeId');
|
||||
|
||||
const { data: finance, isLoading: isLoadingFinance } = useSWR(
|
||||
financeId,
|
||||
(id: number) => FinanceApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!financeId) {
|
||||
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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingFinance && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingFinance && (
|
||||
<FormFinanceInjection
|
||||
type='edit'
|
||||
initialValues={isResponseSuccess(finance) ? finance.data : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFinanceInjectionPage;
|
||||
@@ -1,52 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import FormFinanceAdd from '@/components/pages/finance/add/FormFinanceAdd';
|
||||
import FormFinanceAddInitialBalance from '@/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance';
|
||||
|
||||
const EditFinanceTransactionPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const financeId = searchParams.get('financeId');
|
||||
|
||||
const { data: finance, isLoading: isLoadingFinance } = useSWR(
|
||||
financeId,
|
||||
(id: number) => FinanceApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!financeId) {
|
||||
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 (!isLoadingFinance && (!finance || isResponseError(finance))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingFinance && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
{!isLoadingFinance && (
|
||||
<FormFinanceAdd
|
||||
type='edit'
|
||||
initialValues={isResponseSuccess(finance) ? finance.data : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFinanceTransactionPage;
|
||||
@@ -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,41 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import FinanceDetail from '@/components/pages/finance/FinanceDetail';
|
||||
import useSWR from 'swr';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { FinanceApi } from '@/services/api/finance';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const FinanceDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const financeId = useSearchParams().get('financeId');
|
||||
|
||||
const { data: finance } = useSWR(financeId, () =>
|
||||
FinanceApi.getSingle(Number(financeId))
|
||||
);
|
||||
|
||||
if (!financeId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
console.log(finance);
|
||||
|
||||
// if (!finance || isResponseError(finance)) {
|
||||
// router.replace('/404');
|
||||
// return;
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
{isResponseSuccess(finance) && <FinanceDetail finance={finance.data} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinanceDetailPage;
|
||||
@@ -1,14 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import FinanceTable from '@/components/pages/finance/FinanceTable';
|
||||
|
||||
const Finance = () => {
|
||||
return (
|
||||
<section className='size-full p-6'>
|
||||
<div className='flex flex-row gap-4'></div>
|
||||
<FinanceTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Finance;
|
||||
+20
-40
@@ -1,46 +1,32 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin "daisyui";
|
||||
@import '../styles/daisyui.css';
|
||||
@import '../figma-make/styles/theme.css';
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
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-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;
|
||||
@@ -57,12 +43,6 @@
|
||||
|
||||
@theme {
|
||||
--font-inter: var(--font-inter);
|
||||
|
||||
--container-sm: 40rem;
|
||||
--container-md: 48rem;
|
||||
--container-lg: 64rem;
|
||||
--container-xl: 80rem;
|
||||
--container-2xl: 96rem;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@@ -12,6 +12,8 @@ const DetailInventoryAdjustment = () => {
|
||||
|
||||
// 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;
|
||||
@@ -24,6 +26,9 @@ const DetailInventoryAdjustment = () => {
|
||||
|
||||
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'>
|
||||
|
||||
@@ -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;
|
||||
@@ -3,7 +3,6 @@ import { Inter } from 'next/font/google';
|
||||
import '@/app/globals.css';
|
||||
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { Toaster as SonnerToaster } from '@/figma-make/components/base/sonner';
|
||||
import MainDrawer from '@/components/MainDrawer';
|
||||
import RequireAuth from '@/components/helper/RequireAuth';
|
||||
|
||||
@@ -36,7 +35,6 @@ export default function RootLayout({
|
||||
</RequireAuth>
|
||||
|
||||
<Toaster />
|
||||
<SonnerToaster position='top-right' />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -7,5 +7,4 @@ const Marketing = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Marketing;
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
|
||||
|
||||
const AddProductionStandardPage = () => {
|
||||
return (
|
||||
<>
|
||||
<ProductionStandardForm formType='add' />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProductionStandardPage;
|
||||
@@ -1,56 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProductionStandardApi } from '@/services/api/master-data';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditProductionStandardPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Get Query Params
|
||||
const productionStandardId = searchParams.get('productionStandardId');
|
||||
|
||||
// Fetch Data
|
||||
const { data: productionStandard, isLoading: isLoadingProductionStandard } =
|
||||
useSWR(productionStandardId, (id: number) =>
|
||||
ProductionStandardApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!productionStandardId) {
|
||||
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 (
|
||||
!isLoadingProductionStandard &&
|
||||
(!productionStandard || isResponseError(productionStandard))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingProductionStandard && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingProductionStandard &&
|
||||
isResponseSuccess(productionStandard) && (
|
||||
<ProductionStandardForm
|
||||
formType='edit'
|
||||
initialValue={productionStandard.data}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProductionStandardPage;
|
||||
@@ -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,56 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import ProductionStandardForm from '@/components/pages/master-data/production-standard/form/ProductionStandardForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProductionStandardApi } from '@/services/api/master-data';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const DetailProductionStandardPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Get Query Params
|
||||
const productionStandardId = searchParams.get('productionStandardId');
|
||||
|
||||
// Fetch Data
|
||||
const { data: productionStandard, isLoading: isLoadingProductionStandard } =
|
||||
useSWR(productionStandardId, (id: number) =>
|
||||
ProductionStandardApi.getSingle(id)
|
||||
);
|
||||
|
||||
if (!productionStandardId) {
|
||||
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 (
|
||||
!isLoadingProductionStandard &&
|
||||
(!productionStandard || isResponseError(productionStandard))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingProductionStandard && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingProductionStandard &&
|
||||
isResponseSuccess(productionStandard) && (
|
||||
<ProductionStandardForm
|
||||
formType='detail'
|
||||
initialValue={productionStandard.data}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailProductionStandardPage;
|
||||
@@ -1,11 +0,0 @@
|
||||
import ProductionStandardTable from '@/components/pages/master-data/production-standard/ProductionStandardTable';
|
||||
|
||||
const ProductionStandardPage = () => {
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<ProductionStandardTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionStandardPage;
|
||||
+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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
|
||||
import React, { useImperativeHandle } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const AddProjectFlock = () => {
|
||||
// useImperativeHandle(ref, () => ({
|
||||
// validate() {
|
||||
// toast.success('Validating');
|
||||
// return false;
|
||||
// },
|
||||
// }));
|
||||
return (
|
||||
<section className='w-full flex flex-row justify-center'>
|
||||
<section className='w-full p-4 flex flex-row justify-center'>
|
||||
<ProjectFlockForm formType='add' />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function AddChickinKandang() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='size-full'>
|
||||
<section className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading &&
|
||||
isResponseSuccess(projectFlockKandang) &&
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import ProjectFlockChickinDetail from '@/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
const AddChickin = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const projectFlockId = searchParams.get('projectFlockId');
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className='w-full p-4'>
|
||||
<ProjectFlockChickinDetail projectFlockId={Number(projectFlockId)} />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddChickin;
|
||||
@@ -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,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;
|
||||
@@ -37,7 +37,7 @@ const ProjectFlockEdit = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col justify-center'>
|
||||
<div className='w-full p-4 flex flex-col justify-center'>
|
||||
{isLoadingProjectFlock && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
|
||||
@@ -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 { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const ProjectFlockDetailPage = () => {
|
||||
const ProjectFlockDetail = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
@@ -38,17 +37,19 @@ const ProjectFlockDetailPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col justify-center'>
|
||||
<div className='w-full p-4 flex flex-col justify-center'>
|
||||
{isLoadingProjectFlock && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{isResponseSuccess(projectFlock) && (
|
||||
<ProjectFlockDetail projectFlock={projectFlock.data} />
|
||||
<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>}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import ProjectFlockTable from '@/components/pages/production/project-flock/Proje
|
||||
|
||||
const ProjectFlock = () => {
|
||||
return (
|
||||
<section className='size-full p-4'>
|
||||
<section className='w-full p-4'>
|
||||
<ProjectFlockTable />
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const AddGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const recordingId = searchParams.get('recording_id');
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId && recordingId !== 'new' ? [recordingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (
|
||||
recordingId &&
|
||||
recordingId !== 'new' &&
|
||||
!isLoadingRecording &&
|
||||
(!recording || !isResponseSuccess(recording))
|
||||
) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{recordingId && recordingId !== 'new' && isLoadingRecording && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{(!recordingId ||
|
||||
recordingId === 'new' ||
|
||||
(!isLoadingRecording && recording && isResponseSuccess(recording))) && (
|
||||
<GradingForm
|
||||
type='add'
|
||||
initialValues={
|
||||
isResponseSuccess(recording) ? recording.data?.eggs?.[0] : undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddGrading;
|
||||
@@ -0,0 +1,53 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const EditGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const recordingId = searchParams.get('recordingId');
|
||||
const gradingId = searchParams.get('gradingId');
|
||||
|
||||
const { data: recording, isLoading: isLoadingRecording } = useSWR(
|
||||
recordingId ? [recordingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (!recordingId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingRecording && (!recording || !isResponseSuccess(recording))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingRecording && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingRecording && recording && isResponseSuccess(recording) && (
|
||||
<GradingForm
|
||||
type='edit'
|
||||
initialValues={recording.data.eggs?.find(
|
||||
(egg) => egg.id === parseInt(gradingId || '0')
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditGrading;
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import GradingForm from '@/components/pages/production/recording/grading/form/GradingForm';
|
||||
import { RecordingApi } from '@/services/api/production';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
|
||||
const DetailGrading = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const gradingId = searchParams.get('gradingId');
|
||||
|
||||
const { data: grading, isLoading: isLoadingGrading } = useSWR(
|
||||
gradingId ? [gradingId] : null,
|
||||
([id]) => RecordingApi.getSingle(parseInt(id))
|
||||
);
|
||||
|
||||
if (!gradingId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingGrading && (!grading || !isResponseSuccess(grading))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4 flex flex-row justify-center'>
|
||||
{isLoadingGrading && (
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
)}
|
||||
{!isLoadingGrading && grading && isResponseSuccess(grading) && (
|
||||
<GradingForm
|
||||
type='detail'
|
||||
initialValues={grading.data.eggs?.find(
|
||||
(egg) => egg.id === parseInt(gradingId)
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailGrading;
|
||||
@@ -1,7 +0,0 @@
|
||||
import UniformityForm from '@/components/pages/production/uniformity/form/UniformityForm';
|
||||
|
||||
const AddUniformity = () => {
|
||||
return <UniformityForm formType='add' />;
|
||||
};
|
||||
|
||||
export default AddUniformity;
|
||||
@@ -1,49 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import UniformityDetail from '@/components/pages/production/uniformity/detail/UniformityDetail';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { UniformityApi } from '@/services/api/uniformity';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const UniformityDetailPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const uniformityId = searchParams.get('uniformityId');
|
||||
|
||||
const { data: uniformity, isLoading: isLoadingUniformity } = useSWR(
|
||||
uniformityId,
|
||||
(id: string) => UniformityApi.getUniformityDetail(parseInt(id))
|
||||
);
|
||||
|
||||
if (!uniformityId) {
|
||||
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 (!isLoadingUniformity && (!uniformity || isResponseError(uniformity))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col justify-center'>
|
||||
{isLoadingUniformity && (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4 min-h-screen'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
)}
|
||||
{isResponseSuccess(uniformity) && (
|
||||
<UniformityDetail initialValues={uniformity.data} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UniformityDetailPage;
|
||||
@@ -1,10 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import UniformityPageWrapper from '@/components/pages/production/uniformity/UniformityPageWrapper';
|
||||
|
||||
export default function UniformityLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return <UniformityPageWrapper>{children}</UniformityPageWrapper>;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import UniformityTable from '@/components/pages/production/uniformity/UniformityTable';
|
||||
|
||||
const Uniformity = () => {
|
||||
return <UniformityTable />;
|
||||
};
|
||||
|
||||
export default Uniformity;
|
||||
@@ -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,7 +0,0 @@
|
||||
import FinanceTabs from '@/components/pages/report/finance/FinanceTabs';
|
||||
|
||||
const Finance = () => {
|
||||
return <FinanceTabs />;
|
||||
};
|
||||
|
||||
export default Finance;
|
||||
@@ -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;
|
||||
@@ -1,11 +0,0 @@
|
||||
import ProductionResultContent from '@/components/pages/report/production-result/ProductionResultContent';
|
||||
|
||||
const ProductionResultReportPage = () => {
|
||||
return (
|
||||
<section className='w-full max-w-7xl pb-16'>
|
||||
<ProductionResultContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionResultReportPage;
|
||||
+14
-34
@@ -3,25 +3,29 @@
|
||||
import { HTMLAttributes, ReactNode } from 'react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import type { Color, Variant, Size } from '@/types/theme';
|
||||
|
||||
export interface BadgeProps
|
||||
extends Omit<HTMLAttributes<HTMLSpanElement>, 'className'> {
|
||||
children?: ReactNode;
|
||||
className?: {
|
||||
badge?: string;
|
||||
status?: string;
|
||||
};
|
||||
statusIndicator?: boolean;
|
||||
variant?: Variant;
|
||||
color?: Color;
|
||||
size?: Size;
|
||||
variant?: 'default' | 'outline' | 'ghost' | 'soft' | 'dash';
|
||||
color?:
|
||||
| 'neutral'
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'accent'
|
||||
| 'info'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||
}
|
||||
|
||||
const Badge = ({
|
||||
children,
|
||||
className,
|
||||
statusIndicator = false,
|
||||
variant = 'default',
|
||||
color,
|
||||
size = 'md',
|
||||
@@ -30,7 +34,7 @@ const Badge = ({
|
||||
const getBadgeClasses = () => {
|
||||
const baseClasses = 'badge';
|
||||
|
||||
const variantClasses: Record<Variant, string> = {
|
||||
const variantClasses = {
|
||||
default: '',
|
||||
outline: 'badge-outline',
|
||||
ghost: 'badge-ghost',
|
||||
@@ -38,7 +42,7 @@ const Badge = ({
|
||||
dash: 'badge-dash',
|
||||
};
|
||||
|
||||
const colorClasses: Record<Color, string> = {
|
||||
const colorClasses = {
|
||||
neutral: 'badge-neutral',
|
||||
primary: 'badge-primary',
|
||||
secondary: 'badge-secondary',
|
||||
@@ -47,10 +51,9 @@ const Badge = ({
|
||||
success: 'badge-success',
|
||||
warning: 'badge-warning',
|
||||
error: 'badge-error',
|
||||
none: '',
|
||||
};
|
||||
|
||||
const sizeClasses: Record<Size, string> = {
|
||||
const sizeClasses = {
|
||||
xs: 'badge-xs',
|
||||
sm: 'badge-sm',
|
||||
md: 'badge-md',
|
||||
@@ -67,31 +70,8 @@ const Badge = ({
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusClasses = () => {
|
||||
if (!statusIndicator) return '';
|
||||
|
||||
const statusIndicatorClasses: Record<Color, string> = {
|
||||
neutral: 'bg-neutral',
|
||||
primary: 'bg-primary',
|
||||
secondary: 'bg-secondary',
|
||||
accent: 'bg-accent',
|
||||
info: 'bg-info',
|
||||
success: 'bg-success',
|
||||
warning: 'bg-warning',
|
||||
error: 'bg-error',
|
||||
none: '',
|
||||
};
|
||||
|
||||
return cn(
|
||||
'w-2.5 h-2.5 rounded-full',
|
||||
color && statusIndicatorClasses[color],
|
||||
className?.status
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={getBadgeClasses()} {...props}>
|
||||
{statusIndicator && <span className={getStatusClasses()} />}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
+33
-127
@@ -1,11 +1,9 @@
|
||||
'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'> {
|
||||
@@ -13,13 +11,8 @@ export interface CardProps
|
||||
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 +21,6 @@ export interface CardProps
|
||||
subtitle?: string;
|
||||
actions?: string;
|
||||
footer?: string;
|
||||
collapsible?: string;
|
||||
};
|
||||
variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
@@ -39,27 +31,14 @@ 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';
|
||||
|
||||
@@ -85,31 +64,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 = () => {
|
||||
@@ -144,98 +103,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
|
||||
);
|
||||
|
||||
|
||||
+9
-140
@@ -10,115 +10,28 @@ interface DrawerProps {
|
||||
open: boolean;
|
||||
setOpen: (newOpenState: boolean) => void;
|
||||
openOnLarge?: boolean;
|
||||
variant?: 'sidebar' | 'left' | 'right';
|
||||
zIndex?: string;
|
||||
className?: DrawerClassName;
|
||||
onBackdropClick?: () => void;
|
||||
closeOnBackdropClick?: boolean;
|
||||
expandedContent?: ReactNode;
|
||||
expandedWidth?: string;
|
||||
}
|
||||
|
||||
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,
|
||||
expandedContent,
|
||||
expandedWidth = 'w-[400px]',
|
||||
}: DrawerProps) => {
|
||||
const getDrawerClassNames = (): DrawerClassName => {
|
||||
const baseClassNames = {
|
||||
drawer: 'drawer',
|
||||
drawerContent: 'drawer-content',
|
||||
drawerSide: 'drawer-side',
|
||||
drawerOverlay: 'drawer-overlay',
|
||||
drawerSidebarContent: 'min-h-full bg-base-100',
|
||||
};
|
||||
|
||||
const getSidebarWidth = () => {
|
||||
if (variant === 'sidebar') {
|
||||
return expandedContent
|
||||
? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
|
||||
: 'w-full max-w-[300px] lg:w-[300px]';
|
||||
}
|
||||
return 'w-full sm:min-w-120 sm:w-fit';
|
||||
};
|
||||
|
||||
if (variant === 'sidebar') {
|
||||
return {
|
||||
...baseClassNames,
|
||||
drawerSidebarContent: cn(
|
||||
baseClassNames.drawerSidebarContent,
|
||||
getSidebarWidth()
|
||||
),
|
||||
};
|
||||
} else if (variant === 'right') {
|
||||
return {
|
||||
...baseClassNames,
|
||||
drawer: cn(baseClassNames.drawer, 'drawer-end'),
|
||||
drawerSide: cn(
|
||||
baseClassNames.drawerSide,
|
||||
'border-l border-solid border-gray-200 sm:drawer-side w-screen top-0 right-0 fixed z-21'
|
||||
),
|
||||
drawerSidebarContent: cn(
|
||||
baseClassNames.drawerSidebarContent,
|
||||
getSidebarWidth()
|
||||
),
|
||||
};
|
||||
} 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,
|
||||
getSidebarWidth()
|
||||
),
|
||||
};
|
||||
}
|
||||
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'
|
||||
@@ -127,61 +40,17 @@ 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 - Full height container */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-screen bg-base-100 overflow-hidden',
|
||||
variant === 'right' && 'flex-row'
|
||||
)}
|
||||
>
|
||||
{/* Primary Sidebar Content */}
|
||||
<div
|
||||
className={cn(
|
||||
varianClassName?.drawerSidebarContent,
|
||||
className?.drawerContent,
|
||||
'overflow-y-auto'
|
||||
)}
|
||||
>
|
||||
{sidebarContent}
|
||||
</div>
|
||||
|
||||
{/* Expanded Drawer (Right side, side-by-side) */}
|
||||
{expandedContent && (
|
||||
<div
|
||||
className={cn(
|
||||
'border-l border-gray-200 bg-white flex flex-col h-full',
|
||||
expandedWidth
|
||||
)}
|
||||
>
|
||||
<div className='overflow-y-auto flex-1 h-full'>
|
||||
{expandedContent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
|
||||
{sidebarContent}
|
||||
</div>
|
||||
</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,171 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
|
||||
type FloatingActionsButtonProps = {
|
||||
actions: {
|
||||
action: 'DETAIL' | 'EDIT' | 'DELETE';
|
||||
icon: string;
|
||||
label?: string;
|
||||
onClick?: () => void;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
permissions?: string | string[];
|
||||
}[];
|
||||
approvals: {
|
||||
action: 'APPROVED' | 'REJECTED';
|
||||
icon: string;
|
||||
label?: string;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
permissions?: string | string[];
|
||||
}[];
|
||||
selectedRowIds: number[];
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const FloatingActionsButton = ({
|
||||
actions,
|
||||
approvals,
|
||||
selectedRowIds,
|
||||
onClose,
|
||||
}: FloatingActionsButtonProps) => {
|
||||
const { permissionCheck } = useAuth();
|
||||
// Jika tidak ada baris yang dipilih, jangan tampilkan FAB
|
||||
const positionStyles =
|
||||
selectedRowIds.length > 0
|
||||
? 'bottom-[5%] opacity-100'
|
||||
: 'bottom-[-5%] 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(
|
||||
`fixed ${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) => {
|
||||
if (action.hidden) return false;
|
||||
if (action.permissions) {
|
||||
if (typeof action.permissions === 'string') {
|
||||
return permissionCheck(action.permissions);
|
||||
}
|
||||
return action.permissions.some((permission) =>
|
||||
permissionCheck(permission)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.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
|
||||
.filter((approval) => {
|
||||
if (approval.permissions) {
|
||||
if (typeof approval.permissions === 'string') {
|
||||
return permissionCheck(approval.permissions);
|
||||
}
|
||||
return approval.permissions.some((permission) =>
|
||||
permissionCheck(permission)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.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;
|
||||
+147
-21
@@ -1,24 +1,161 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Drawer from '@/components/Drawer';
|
||||
import Menu from '@/components/menu/Menu';
|
||||
import MenuItem from '@/components/menu/MenuItem';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Collapse from '@/components/Collapse';
|
||||
import Button from '@/components/Button';
|
||||
import SidebarMenu from '@/components/molecules/SidebarMenu';
|
||||
import PermissionNotFound from '@/components/helper/PermissionNotFound';
|
||||
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
import { MAIN_DRAWER_LINKS } from '@/config/constant';
|
||||
import { isPathActive } from '@/lib/helper';
|
||||
import { ROUTE_PERMISSIONS } from '@/config/route-permission';
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
type CollapseMenuProps = {
|
||||
title: string;
|
||||
link: string;
|
||||
icon: string;
|
||||
submenu?: CollapseMenuProps[];
|
||||
depth?: number;
|
||||
};
|
||||
|
||||
const isPathActive = (pathname: string, link?: string) => {
|
||||
if (!link) return false;
|
||||
|
||||
const splittedPathname = pathname.split('/');
|
||||
const splittedLink = link.split('/');
|
||||
|
||||
const isActiveLinkValid = splittedLink.every((linkChunk, idx) => {
|
||||
return linkChunk === splittedPathname[idx];
|
||||
});
|
||||
|
||||
return pathname.startsWith(link) && isActiveLinkValid;
|
||||
};
|
||||
|
||||
const CollapseMenu = ({
|
||||
title,
|
||||
link,
|
||||
icon,
|
||||
submenu,
|
||||
depth = 0,
|
||||
}: CollapseMenuProps) => {
|
||||
const pathname = usePathname();
|
||||
const isActive = isPathActive(pathname, link);
|
||||
const [open, setOpen] = useState(isActive);
|
||||
|
||||
const menuCollapseTitle = (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full px-3 py-2 rounded-md text-base font-semibold transition-colors flex flex-row justify-between items-center gap-2 hover:bg-primary/10 opacity-40',
|
||||
{
|
||||
'bg-primary/10 opacity-100': open || isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className='flex flex-row items-center gap-2'>
|
||||
<Icon icon={icon} width={20} height={20} />
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
icon='cuida:caret-up-outline'
|
||||
width={20}
|
||||
height={20}
|
||||
className={cn('transition-transform', {
|
||||
'rotate-90': !open,
|
||||
'rotate-180': open,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
open={open}
|
||||
title={menuCollapseTitle}
|
||||
onOpenChange={setOpen}
|
||||
className='w-full'
|
||||
titleClassName='w-full p-0!'
|
||||
>
|
||||
<Menu>
|
||||
<div
|
||||
className='w-full py-0.5 flex flex-col gap-0.5'
|
||||
style={{
|
||||
paddingLeft: `${0.5 * (depth + 1)}rem`,
|
||||
}}
|
||||
>
|
||||
{submenu?.map((item, idx) => {
|
||||
const hasSubmenu = item.submenu && item.submenu.length > 0;
|
||||
|
||||
if (!hasSubmenu) {
|
||||
return (
|
||||
<MenuItem
|
||||
key={idx}
|
||||
title={item.title}
|
||||
href={item.link}
|
||||
icon={item.icon}
|
||||
active={isPathActive(pathname, item.link)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CollapseMenu
|
||||
key={idx}
|
||||
title={item.title}
|
||||
link={item.link}
|
||||
icon={item.icon}
|
||||
submenu={item.submenu}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Menu>
|
||||
</Collapse>
|
||||
);
|
||||
};
|
||||
|
||||
const MainDrawerMenu = () => {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
{MAIN_DRAWER_LINKS.map((item, idx) => {
|
||||
const hasSubmenu = item.submenu && item.submenu.length > 0;
|
||||
|
||||
if (!hasSubmenu) {
|
||||
return (
|
||||
<MenuItem
|
||||
key={idx}
|
||||
title={item.title}
|
||||
href={item.link}
|
||||
icon={item.icon}
|
||||
active={pathname.startsWith(item.link)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CollapseMenu
|
||||
key={idx}
|
||||
title={item.title}
|
||||
link={item.link}
|
||||
icon={item.icon}
|
||||
submenu={item.submenu}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
const MainDrawerContent = () => {
|
||||
const pathname = usePathname();
|
||||
const { setMainDrawerOpen } = useUiStore();
|
||||
|
||||
const closeMainDrawerHandler = () => {
|
||||
@@ -54,7 +191,7 @@ const MainDrawerContent = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SidebarMenu menu={MAIN_DRAWER_LINKS} activeLink={pathname} />
|
||||
<MainDrawerMenu />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -65,13 +202,6 @@ const MainDrawer = ({
|
||||
}>) => {
|
||||
const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
|
||||
const pathname = usePathname();
|
||||
const { permissionCheck } = useAuth();
|
||||
|
||||
const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
|
||||
|
||||
const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
|
||||
permissionCheck(permission)
|
||||
);
|
||||
|
||||
const getPageTitle = useCallback(() => {
|
||||
let title = '';
|
||||
@@ -86,9 +216,9 @@ const MainDrawer = ({
|
||||
const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
|
||||
|
||||
if (!title) {
|
||||
title += menu?.text;
|
||||
title += menu?.title;
|
||||
} else {
|
||||
title += ' - ' + menu?.text;
|
||||
title += ' - ' + menu?.title;
|
||||
}
|
||||
|
||||
if (!hasSubmenu || !menu.submenu) return;
|
||||
@@ -111,10 +241,6 @@ const MainDrawer = ({
|
||||
setMainDrawerOpen(!mainDrawerOpen);
|
||||
};
|
||||
|
||||
if (!isPermitted) {
|
||||
return <PermissionNotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={mainDrawerOpen}
|
||||
|
||||
@@ -10,19 +10,15 @@ import {
|
||||
} from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export const useModal = (isNestingModal = false) => {
|
||||
export const useModal = () => {
|
||||
const ref = useRef<HTMLDialogElement>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const openModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
if (isNestingModal) {
|
||||
ref.current.showModal();
|
||||
} else {
|
||||
ref.current.show();
|
||||
}
|
||||
ref.current.show();
|
||||
setOpen(true);
|
||||
}, [isNestingModal]);
|
||||
}, []);
|
||||
|
||||
const closeModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
|
||||
+14
-39
@@ -1,17 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import toast from 'react-hot-toast';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Menu from '@/components/menu/Menu';
|
||||
import MenuItem from '@/components/menu/MenuItem';
|
||||
import Button from '@/components/Button';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { AuthApi } from '@/services/api/auth';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
|
||||
interface NavbarProps {
|
||||
title: string;
|
||||
@@ -19,21 +11,6 @@ interface NavbarProps {
|
||||
}
|
||||
|
||||
const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
|
||||
const { setUser } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const logoutClickHandler = async () => {
|
||||
const logoutRes = await AuthApi.logout();
|
||||
|
||||
if (isResponseError(logoutRes)) {
|
||||
toast.error('Gagal logout! Coba lagi!');
|
||||
return;
|
||||
}
|
||||
|
||||
setUser(undefined);
|
||||
router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='navbar px-4 bg-base-100 shadow-sm'>
|
||||
<div className='flex-1'>
|
||||
@@ -53,24 +30,22 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<Dropdown
|
||||
align='end'
|
||||
direction='bottom'
|
||||
trigger={
|
||||
<div className='btn btn-ghost btn-circle avatar'>
|
||||
<div className='w-10 rounded-full border flex justify-center items-center'>
|
||||
<Icon icon='uil:user' width={40} height={40} />
|
||||
</div>
|
||||
<div className='dropdown dropdown-end'>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
className='btn btn-ghost btn-circle avatar'
|
||||
>
|
||||
<div className='w-10 rounded-full border grid place-items-center'>
|
||||
<Icon icon='uil:user' width={40} height={40} />
|
||||
</div>
|
||||
}
|
||||
className={{
|
||||
content: 'w-52 mt-3',
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<MenuItem title='Logout' onClick={logoutClickHandler} />
|
||||
</div>
|
||||
|
||||
<Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
|
||||
<MenuItem title='Settings' href='#' />
|
||||
<MenuItem title='Logout' href='#' />
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+211
-301
@@ -1,9 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, ReactNode } from 'react';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
@@ -19,18 +17,16 @@ const PaginationButton = ({
|
||||
disabled?: boolean;
|
||||
onClick?: () => void;
|
||||
}) => (
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
<button
|
||||
className={cn(
|
||||
'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square',
|
||||
'disabled:text-gray-700 disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-gray-50 disabled:active:translate-y-0'
|
||||
)}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
|
||||
'disabled:text-primary disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-primary/10 disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
</Button>
|
||||
</button>
|
||||
);
|
||||
|
||||
const EtcPaginationButton = ({
|
||||
@@ -52,7 +48,7 @@ const EtcPaginationButton = ({
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
className={cn(
|
||||
'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
|
||||
'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
|
||||
)}
|
||||
>
|
||||
...
|
||||
@@ -61,7 +57,7 @@ const EtcPaginationButton = ({
|
||||
<div className='dropdown-content'>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className='menu bg-base-100 rounded-lg! z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
|
||||
className='menu bg-base-100 rounded-lg z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
|
||||
>
|
||||
{pages.map((pageNumber) => (
|
||||
<li key={pageNumber}>
|
||||
@@ -80,7 +76,7 @@ const EtcPaginationButton = ({
|
||||
<button
|
||||
disabled
|
||||
className={cn(
|
||||
'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
|
||||
'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
|
||||
)}
|
||||
>
|
||||
...
|
||||
@@ -94,20 +90,16 @@ const Pagination = ({
|
||||
currentPage = 1,
|
||||
totalItems = 0,
|
||||
itemsPerPage = 10,
|
||||
rowOptions = [10, 20, 50, 100],
|
||||
onPageChange,
|
||||
onPrevPage = () => {},
|
||||
onNextPage = () => {},
|
||||
onRowChange,
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalItems: number;
|
||||
itemsPerPage: number;
|
||||
rowOptions?: number[];
|
||||
onPageChange: (pageNumber: number) => void;
|
||||
onPrevPage: () => void;
|
||||
onNextPage: () => void;
|
||||
onRowChange?: (row: number) => void;
|
||||
}) => {
|
||||
const totalPages =
|
||||
Math.ceil(totalItems / itemsPerPage) === 0
|
||||
@@ -115,139 +107,30 @@ const Pagination = ({
|
||||
: Math.ceil(totalItems / itemsPerPage);
|
||||
|
||||
const pageChangeHandler = (pageNumber: number) => onPageChange(pageNumber);
|
||||
const firstPageClickHandler = () => onPageChange(1);
|
||||
const lastPageClickHandler = () => onPageChange(totalPages);
|
||||
|
||||
const rowChangeHandler: ChangeEventHandler<HTMLSelectElement> = (e) => {
|
||||
onRowChange?.(Number(e.target.value));
|
||||
};
|
||||
|
||||
const DisplayedRowCountSelect = () => (
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<span className='text-sm font-medium text-base-content/50'>Showing</span>
|
||||
|
||||
<select
|
||||
defaultValue={itemsPerPage}
|
||||
onChange={rowChangeHandler}
|
||||
className='select select-xs w-fit pl-3 pr-7 text-base-content/50'
|
||||
>
|
||||
{rowOptions.map((rowOption, rowOptionIdx) => (
|
||||
<option
|
||||
key={rowOptionIdx}
|
||||
value={rowOption}
|
||||
className='text-base-content active:text-neutral-content'
|
||||
>
|
||||
{rowOption} Per page
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
|
||||
const GoToFirstPageButton = () => (
|
||||
<Button
|
||||
disabled={currentPage === 1}
|
||||
onClick={firstPageClickHandler}
|
||||
variant='ghost'
|
||||
color='none'
|
||||
className={cn(
|
||||
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
|
||||
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:chevron-double-left'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
||||
const PrevPageButton = () => (
|
||||
<Button
|
||||
disabled={currentPage === 1}
|
||||
onClick={onPrevPage}
|
||||
variant='ghost'
|
||||
color='none'
|
||||
className={cn(
|
||||
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
|
||||
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:chevron-left'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
||||
const GoToLastPageButton = () => (
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={lastPageClickHandler}
|
||||
className={cn(
|
||||
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
|
||||
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:chevron-double-right'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
||||
const NextPageButton = () => (
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={onNextPage}
|
||||
className={cn(
|
||||
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
|
||||
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:chevron-right'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
||||
const PageInfo = () => (
|
||||
<span className='text-nowrap text-sm font-medium text-base-content/50'>
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='@container'>
|
||||
<div className='flex flex-row justify-center items-center'>
|
||||
<div className='hidden @md:block'>
|
||||
<DisplayedRowCountSelect />
|
||||
</div>
|
||||
<div>
|
||||
<div className='join w-full justify-between items-center gap-3'>
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={onPrevPage}
|
||||
className={cn(
|
||||
'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
|
||||
'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='uil:arrow-left'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>{' '}
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
|
||||
<div className='hidden @md:block'>
|
||||
<GoToFirstPageButton />
|
||||
</div>
|
||||
|
||||
<div className='hidden @md:block'>
|
||||
<PrevPageButton />
|
||||
</div>
|
||||
|
||||
{totalPages <= 7 &&
|
||||
range(1, totalPages).map((pageNumber) => (
|
||||
{totalPages <= 7 && (
|
||||
<div className='join-item join gap-0.5'>
|
||||
{range(1, totalPages).map((pageNumber) => (
|
||||
<PaginationButton
|
||||
key={pageNumber}
|
||||
content={pageNumber}
|
||||
@@ -255,168 +138,195 @@ const Pagination = ({
|
||||
onClick={() => pageChangeHandler(pageNumber)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 7 && (
|
||||
<>
|
||||
<PaginationButton
|
||||
content={1}
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => pageChangeHandler(1)}
|
||||
/>
|
||||
{totalPages > 7 && (
|
||||
<div className='join-item join gap-0.5'>
|
||||
<PaginationButton
|
||||
content={1}
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => pageChangeHandler(1)}
|
||||
/>
|
||||
|
||||
{totalPages >= 2 &&
|
||||
(currentPage <= 3 || currentPage >= totalPages - 2) && (
|
||||
<PaginationButton
|
||||
content={2}
|
||||
disabled={currentPage === 2}
|
||||
onClick={() => pageChangeHandler(2)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 2 &&
|
||||
currentPage > 3 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<EtcPaginationButton
|
||||
startPage={2}
|
||||
endPage={currentPage - 2}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 3 &&
|
||||
(currentPage <= 4 || currentPage >= totalPages - 2) &&
|
||||
currentPage !== totalPages - 2 && (
|
||||
<PaginationButton
|
||||
content={3}
|
||||
disabled={currentPage === 3}
|
||||
onClick={() => pageChangeHandler(3)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 &&
|
||||
(currentPage <= 2 || currentPage >= totalPages - 2) && (
|
||||
<EtcPaginationButton
|
||||
startPage={
|
||||
currentPage <= 2
|
||||
? currentPage + 2
|
||||
: currentPage === totalPages - 2
|
||||
? 3
|
||||
: currentPage >= totalPages - 1
|
||||
? 4
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 2 || currentPage >= totalPages - 1
|
||||
? totalPages - 3
|
||||
: currentPage === totalPages - 2
|
||||
? totalPages - 4
|
||||
: 2
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 3 &&
|
||||
currentPage > 4 &&
|
||||
currentPage < totalPages - 1 && (
|
||||
<PaginationButton
|
||||
content={currentPage - 1}
|
||||
onClick={() => pageChangeHandler(currentPage - 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 &&
|
||||
currentPage > 3 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<PaginationButton content={currentPage} disabled />
|
||||
)}
|
||||
|
||||
{totalPages >= 5 &&
|
||||
currentPage > 2 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<PaginationButton
|
||||
content={currentPage + 1}
|
||||
onClick={() => pageChangeHandler(currentPage + 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 5 &&
|
||||
(currentPage <= 2 || currentPage >= totalPages - 2) && (
|
||||
<PaginationButton
|
||||
content={totalPages - 2}
|
||||
disabled={currentPage === totalPages - 2}
|
||||
onClick={() => pageChangeHandler(totalPages - 2)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 6 &&
|
||||
currentPage > 2 &&
|
||||
currentPage < totalPages - 3 && (
|
||||
<EtcPaginationButton
|
||||
startPage={
|
||||
currentPage <= 3
|
||||
? currentPage + 2
|
||||
: currentPage >= 4
|
||||
? currentPage + 2
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 3
|
||||
? totalPages - 2
|
||||
: currentPage >= 4
|
||||
? totalPages - 1
|
||||
: 0
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 6 &&
|
||||
(currentPage <= 3 || currentPage >= totalPages - 3) && (
|
||||
<PaginationButton
|
||||
content={totalPages - 1}
|
||||
disabled={currentPage === totalPages - 1}
|
||||
onClick={() => pageChangeHandler(totalPages - 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 && (
|
||||
{totalPages >= 2 &&
|
||||
(currentPage <= 3 || currentPage >= totalPages - 2) && (
|
||||
<PaginationButton
|
||||
content={totalPages}
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => pageChangeHandler(totalPages)}
|
||||
content={2}
|
||||
disabled={currentPage === 2}
|
||||
onClick={() => pageChangeHandler(2)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
{totalPages >= 2 &&
|
||||
currentPage > 3 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<EtcPaginationButton
|
||||
startPage={2}
|
||||
endPage={currentPage - 2}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 3 &&
|
||||
(currentPage <= 4 || currentPage >= totalPages - 2) &&
|
||||
currentPage !== totalPages - 2 && (
|
||||
<PaginationButton
|
||||
content={3}
|
||||
disabled={currentPage === 3}
|
||||
onClick={() => pageChangeHandler(3)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 &&
|
||||
(currentPage <= 2 || currentPage >= totalPages - 2) && (
|
||||
<EtcPaginationButton
|
||||
startPage={
|
||||
currentPage <= 2
|
||||
? currentPage + 2
|
||||
: currentPage === totalPages - 2
|
||||
? 3
|
||||
: currentPage >= totalPages - 1
|
||||
? 4
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 2 || currentPage >= totalPages - 1
|
||||
? totalPages - 3
|
||||
: currentPage === totalPages - 2
|
||||
? totalPages - 4
|
||||
: 2
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 3 &&
|
||||
currentPage > 4 &&
|
||||
currentPage < totalPages - 1 && (
|
||||
<PaginationButton
|
||||
content={currentPage - 1}
|
||||
onClick={() => pageChangeHandler(currentPage - 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 &&
|
||||
currentPage > 3 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<PaginationButton content={currentPage} disabled />
|
||||
)}
|
||||
|
||||
{totalPages >= 5 &&
|
||||
currentPage > 2 &&
|
||||
currentPage < totalPages - 2 && (
|
||||
<PaginationButton
|
||||
content={currentPage + 1}
|
||||
onClick={() => pageChangeHandler(currentPage + 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 5 &&
|
||||
(currentPage <= 2 || currentPage >= totalPages - 2) && (
|
||||
<PaginationButton
|
||||
content={totalPages - 2}
|
||||
disabled={currentPage === totalPages - 2}
|
||||
onClick={() => pageChangeHandler(totalPages - 2)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 6 &&
|
||||
currentPage > 2 &&
|
||||
currentPage < totalPages - 3 && (
|
||||
<EtcPaginationButton
|
||||
startPage={
|
||||
currentPage <= 3
|
||||
? currentPage + 2
|
||||
: currentPage >= 4
|
||||
? currentPage + 2
|
||||
: 1
|
||||
}
|
||||
endPage={
|
||||
currentPage <= 3
|
||||
? totalPages - 2
|
||||
: currentPage >= 4
|
||||
? totalPages - 1
|
||||
: 0
|
||||
}
|
||||
onPageItemClick={pageChangeHandler}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 6 &&
|
||||
(currentPage <= 3 || currentPage >= totalPages - 3) && (
|
||||
<PaginationButton
|
||||
content={totalPages - 1}
|
||||
disabled={currentPage === totalPages - 1}
|
||||
onClick={() => pageChangeHandler(totalPages - 1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{totalPages >= 7 && (
|
||||
<PaginationButton
|
||||
content={totalPages}
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => pageChangeHandler(totalPages)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={onNextPage}
|
||||
className={cn(
|
||||
'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs hidden sm:flex justify-center items-center gap-1.5',
|
||||
'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
|
||||
<div className='hidden @md:block'>
|
||||
<NextPageButton />
|
||||
</div>
|
||||
|
||||
<div className='hidden @md:block'>
|
||||
<GoToLastPageButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='hidden @md:block'>
|
||||
<PageInfo />
|
||||
</div>
|
||||
>
|
||||
Next{' '}
|
||||
<Icon
|
||||
icon='uil:arrow-right'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='flex @md:hidden flex-col justify-center items-end gap-2'>
|
||||
<div className='flex flex-row items-center gap-0.5'>
|
||||
<GoToFirstPageButton />
|
||||
<PrevPageButton />
|
||||
<NextPageButton />
|
||||
<GoToLastPageButton />
|
||||
</div>
|
||||
<div className='flex gap-2 mt-2 sm:hidden'>
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={onPrevPage}
|
||||
className={cn(
|
||||
'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
|
||||
'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon='uil:arrow-left'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>{' '}
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<DisplayedRowCountSelect />
|
||||
|
||||
<PageInfo />
|
||||
</div>
|
||||
<button
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={onNextPage}
|
||||
className={cn(
|
||||
'join-item btn btn-outline group px-3 py-2 text-sm font-semibold rounded-lg border border-gray-300 shadow-xs flex justify-center items-center gap-1.5',
|
||||
'disabled:bg-[initial]! disabled:text-gray-400 disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
|
||||
)}
|
||||
>
|
||||
Next{' '}
|
||||
<Icon
|
||||
icon='uil:arrow-right'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 group-disabled:text-gray-300'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+73
-177
@@ -14,7 +14,6 @@ import {
|
||||
SortingState,
|
||||
OnChangeFn,
|
||||
Row,
|
||||
HeaderContext,
|
||||
} from '@tanstack/react-table';
|
||||
import { rankItem } from '@tanstack/match-sorter-utils';
|
||||
import { Icon } from '@iconify/react';
|
||||
@@ -32,9 +31,6 @@ interface TableClassNames {
|
||||
tableBodyClassName?: string;
|
||||
bodyRowClassName?: string;
|
||||
bodyColumnClassName?: string;
|
||||
tableFooterClassName?: string;
|
||||
footerRowClassName?: string;
|
||||
footerColumnClassName?: string;
|
||||
paginationClassName?: string;
|
||||
}
|
||||
|
||||
@@ -42,7 +38,6 @@ export interface TableProps<TData extends object> {
|
||||
data: TData[];
|
||||
columns: ColumnDef<TData, unknown>[];
|
||||
pageSize?: number;
|
||||
onPageSizeChange?: (pageSize: number) => void;
|
||||
totalItems?: number;
|
||||
page?: number;
|
||||
onPageChange?: (page: number) => void;
|
||||
@@ -57,15 +52,6 @@ export interface TableProps<TData extends object> {
|
||||
rowSelection?: Record<string, boolean>;
|
||||
setRowSelection?: OnChangeFn<Record<string, boolean>>;
|
||||
enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
|
||||
renderFooter?: boolean;
|
||||
withCheckbox?: boolean;
|
||||
rowOptions?: number[];
|
||||
/**
|
||||
* Custom row renderer. Should return a complete <tr> element or null.
|
||||
* This gives full control over the row structure including colspan.
|
||||
* Return null to render the default row.
|
||||
*/
|
||||
renderCustomRow?: (row: Row<TData>) => ReactNode | null;
|
||||
}
|
||||
|
||||
const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
|
||||
@@ -78,36 +64,28 @@ const emptyContentDefaultValue = (
|
||||
</div>
|
||||
);
|
||||
|
||||
export const TABLE_DEFAULT_STYLING = {
|
||||
containerClassName: 'w-full mb-20',
|
||||
tableWrapperClassName:
|
||||
'overflow-x-auto border border-solid border-base-content/10 rounded-lg',
|
||||
tableClassName: 'font-inter w-full table-auto text-sm font-medium',
|
||||
tableHeaderClassName: '',
|
||||
headerRowClassName: '',
|
||||
headerColumnClassName:
|
||||
'px-4 py-3 border-base-content/10 text-base-content/50',
|
||||
tableBodyClassName: '',
|
||||
bodyRowClassName: 'border-t border-base-content/10',
|
||||
bodyColumnClassName: 'px-4 py-3 text-base-content',
|
||||
paginationClassName: '',
|
||||
tableFooterClassName: 'font-semibold border-base-content/10',
|
||||
footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
|
||||
footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
|
||||
};
|
||||
|
||||
const Table = <TData extends object>({
|
||||
data = [],
|
||||
columns = [],
|
||||
pageSize = 10,
|
||||
onPageSizeChange,
|
||||
totalItems,
|
||||
page,
|
||||
onPageChange,
|
||||
isLoading = false,
|
||||
fuzzySearchValue,
|
||||
onFuzzySearchValueChange,
|
||||
className = TABLE_DEFAULT_STYLING,
|
||||
className = {
|
||||
containerClassName: '',
|
||||
tableWrapperClassName: '',
|
||||
tableClassName: '',
|
||||
tableHeaderClassName: '',
|
||||
headerRowClassName: '',
|
||||
headerColumnClassName: '',
|
||||
tableBodyClassName: '',
|
||||
bodyRowClassName: '',
|
||||
bodyColumnClassName: '',
|
||||
paginationClassName: '',
|
||||
},
|
||||
emptyContent = emptyContentDefaultValue,
|
||||
sorting,
|
||||
setSorting,
|
||||
@@ -115,21 +93,12 @@ const Table = <TData extends object>({
|
||||
rowSelection,
|
||||
setRowSelection,
|
||||
enableRowSelection,
|
||||
renderFooter = false,
|
||||
withCheckbox = false,
|
||||
rowOptions = [10, 20, 50, 100],
|
||||
renderCustomRow,
|
||||
}: TableProps<TData>) => {
|
||||
const isServerSideTable =
|
||||
totalItems !== undefined &&
|
||||
page !== undefined &&
|
||||
onPageChange !== undefined;
|
||||
|
||||
const tableClassNames = {
|
||||
...TABLE_DEFAULT_STYLING,
|
||||
...className,
|
||||
};
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: pageSize,
|
||||
@@ -222,148 +191,77 @@ const Table = <TData extends object>({
|
||||
}, [pageSize, setPageSize]);
|
||||
|
||||
return (
|
||||
<div className={tableClassNames.containerClassName}>
|
||||
<div className={tableClassNames.tableWrapperClassName}>
|
||||
<table className={tableClassNames.tableClassName}>
|
||||
<thead className={tableClassNames.tableHeaderClassName}>
|
||||
<div className={className.containerClassName}>
|
||||
<div className={className.tableWrapperClassName}>
|
||||
<table className={className.tableClassName}>
|
||||
<thead className={className.tableHeaderClassName}>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr
|
||||
key={headerGroup.id}
|
||||
className={tableClassNames.headerRowClassName}
|
||||
>
|
||||
{headerGroup.headers.map((header) => {
|
||||
const columnRelativeDepth =
|
||||
header.depth - header.column.depth;
|
||||
if (
|
||||
!header.isPlaceholder &&
|
||||
columnRelativeDepth > 1 &&
|
||||
header.id === header.column.id
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
let rowSpan = 1;
|
||||
if (header.isPlaceholder) {
|
||||
const leafs = header.getLeafHeaders();
|
||||
rowSpan = leafs[leafs.length - 1].depth - header.depth;
|
||||
}
|
||||
return (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
rowSpan={rowSpan}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
className={cn(
|
||||
header.column.getCanSort()
|
||||
? 'cursor-pointer select-none'
|
||||
: '',
|
||||
{
|
||||
'first:w-9 first:pr-0': withCheckbox,
|
||||
},
|
||||
{
|
||||
'border-b': header.colSpan > 1,
|
||||
},
|
||||
tableClassNames.headerColumnClassName
|
||||
<tr key={headerGroup.id} className={className.headerRowClassName}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
className={cn(
|
||||
header.column.getCanSort()
|
||||
? 'cursor-pointer select-none'
|
||||
: '',
|
||||
className.headerColumnClassName
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center gap-1'>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn('flex items-center gap-1 min-h-full', {
|
||||
'justify-center': header.colSpan > 1,
|
||||
})}
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
|
||||
{header.column.getCanSort() && (
|
||||
<div className='w-4 h-4 relative flex flex-col items-center'>
|
||||
<Icon
|
||||
icon='heroicons:chevron-up-16-solid'
|
||||
width={18}
|
||||
height={18}
|
||||
className={cn(
|
||||
'absolute -top-1',
|
||||
'transition-all ease-in-out duration-200',
|
||||
header.column.getIsSorted() === 'asc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
<Icon
|
||||
icon='heroicons:chevron-down-16-solid'
|
||||
width={18}
|
||||
height={18}
|
||||
className={cn(
|
||||
'absolute -bottom-1.5',
|
||||
'transition-all ease-in-out duration-200',
|
||||
header.column.getIsSorted() === 'desc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
{header.column.getCanSort() && (
|
||||
<div className='flex items-center'>
|
||||
<Icon
|
||||
icon='lucide:arrow-up'
|
||||
width={12}
|
||||
height={12}
|
||||
className={cn(
|
||||
'transition-all ease-in-out duration-200',
|
||||
header.column.getIsSorted() === 'asc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
<Icon
|
||||
icon='lucide:arrow-down'
|
||||
width={12}
|
||||
height={12}
|
||||
className={cn(
|
||||
'transition-all ease-in-out duration-200',
|
||||
header.column.getIsSorted() === 'desc'
|
||||
? 'text-black'
|
||||
: 'text-black/30'
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
|
||||
<tbody className={tableClassNames.tableBodyClassName}>
|
||||
{table.getRowModel().rows.map((row) => {
|
||||
const customRowContent = renderCustomRow?.(row);
|
||||
<tbody className={className.tableBodyClassName}>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className={className.bodyRowClassName}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className={className.bodyColumnClassName}>
|
||||
{!isLoading &&
|
||||
flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
|
||||
if (customRowContent) {
|
||||
return renderCustomRow?.(row);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr key={row.id} className={tableClassNames.bodyRowClassName}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={cn(
|
||||
{ 'first:w-9 first:pr-0': withCheckbox },
|
||||
tableClassNames.bodyColumnClassName
|
||||
)}
|
||||
>
|
||||
{!isLoading &&
|
||||
flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
|
||||
{isLoading && <div className='skeleton w-full h-4' />}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot className={cn(tableClassNames.tableFooterClassName)}>
|
||||
{renderFooter && (
|
||||
<tr className={cn(tableClassNames.footerRowClassName)}>
|
||||
{table.getAllLeafColumns().map((column) => (
|
||||
<td
|
||||
key={column.id}
|
||||
className={cn(
|
||||
{ 'first:w-9 first:pr-0': withCheckbox },
|
||||
tableClassNames.footerColumnClassName
|
||||
)}
|
||||
>
|
||||
{column.columnDef.footer &&
|
||||
flexRender(column.columnDef.footer, {
|
||||
column,
|
||||
header: column.columnDef,
|
||||
table,
|
||||
} as HeaderContext<TData, unknown>)}
|
||||
{isLoading && <div className='skeleton w-full h-4' />}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
)}
|
||||
</tfoot>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -372,7 +270,7 @@ const Table = <TData extends object>({
|
||||
emptyContent}
|
||||
|
||||
{data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
|
||||
<div className={cn('mt-5', tableClassNames.paginationClassName)}>
|
||||
<div className={cn('mt-5', className.paginationClassName)}>
|
||||
<Pagination
|
||||
totalItems={isServerSideTable ? totalItems : table.getRowCount()}
|
||||
itemsPerPage={table.getState().pagination.pageSize}
|
||||
@@ -384,8 +282,6 @@ const Table = <TData extends object>({
|
||||
onPrevPage={prevPageClickHandler}
|
||||
onNextPage={nextPageClickHandler}
|
||||
onPageChange={pageChangeHandler}
|
||||
rowOptions={rowOptions}
|
||||
onRowChange={onPageSizeChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
+6
-13
@@ -21,7 +21,6 @@ export interface TabsProps
|
||||
className?:
|
||||
| string
|
||||
| {
|
||||
container?: string;
|
||||
wrapper?: string;
|
||||
tab?: string;
|
||||
content?: string;
|
||||
@@ -54,14 +53,10 @@ const Tabs = ({
|
||||
onTabChange?.(tabId);
|
||||
};
|
||||
|
||||
const {
|
||||
container: containerClassName,
|
||||
wrapper: wrapperClassName,
|
||||
tab: tabClassName,
|
||||
content: contentClassName,
|
||||
} = typeof className === 'object'
|
||||
? className
|
||||
: { wrapper: className, tab: undefined };
|
||||
const { wrapper: wrapperClassName, tab: tabClassName } =
|
||||
typeof className === 'object'
|
||||
? className
|
||||
: { wrapper: className, tab: undefined };
|
||||
|
||||
const getTabsClasses = () => {
|
||||
const variantClasses: Record<string, string> = {
|
||||
@@ -109,7 +104,7 @@ const Tabs = ({
|
||||
{...props}
|
||||
className={cn(
|
||||
'w-full',
|
||||
typeof className === 'string' ? className : containerClassName
|
||||
typeof className === 'string' ? className : undefined
|
||||
)}
|
||||
>
|
||||
<div role='tablist' className={getTabsClasses()}>
|
||||
@@ -126,9 +121,7 @@ const Tabs = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{activeContent && (
|
||||
<div className={cn('mt-4', contentClassName)}>{activeContent}</div>
|
||||
)}
|
||||
{activeContent && <div className='mt-4'>{activeContent}</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,12 +0,0 @@
|
||||
const PermissionNotFound = () => {
|
||||
return (
|
||||
<div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
|
||||
<h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
|
||||
<p className='text-gray-600 text-center'>
|
||||
You do not have permission to access this page.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PermissionNotFound;
|
||||
@@ -1,107 +1,197 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode, useEffect } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import useSWRImmutable from 'swr/immutable';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
|
||||
import { AuthApi } from '@/services/api/auth';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
|
||||
import { AxiosError } from 'axios';
|
||||
import { redirectToSSO } from '@/lib/auth-helper';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { GetMeResponse } from '@/types/api/api-general';
|
||||
|
||||
// TODO: delete this later, DONT HARDCODE USER DATA
|
||||
const DUMMY_USER = {
|
||||
id: 1,
|
||||
email: 'admin@mbugroup.id',
|
||||
npk: '0001',
|
||||
name: 'Super Admin',
|
||||
image: null,
|
||||
created_at: '2025-09-30T03:24:20.899229Z',
|
||||
updated_at: '2025-09-30T03:24:20.899229Z',
|
||||
roles: [
|
||||
{
|
||||
id: 1,
|
||||
key: 'mbu.super_admin',
|
||||
name: 'MBU Administrator',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'mbu:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'mbu:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'mbu:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 1,
|
||||
name: 'PT Mitra Berlian Unggas',
|
||||
alias: 'MBU',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
key: 'lti.super_admin',
|
||||
name: 'LTI Administrator',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 4,
|
||||
name: 'lti:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'lti:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'lti:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 2,
|
||||
name: 'PT Lumbung Telur Indonesia',
|
||||
alias: 'LTI',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
key: 'manbu.super_admin',
|
||||
name: 'MANBU Administrator',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
permissions: [
|
||||
{
|
||||
id: 7,
|
||||
name: 'manbu:purchase:read',
|
||||
action: 'read',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'manbu:purchase:create',
|
||||
action: 'create',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'manbu:purchase:approve',
|
||||
action: 'approve',
|
||||
client: {
|
||||
id: 3,
|
||||
name: 'PT Mandiri Berlian Unggas',
|
||||
alias: 'MANBU',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface RequireAuthProps {
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
const RequireAuth = ({ children }: RequireAuthProps) => {
|
||||
const { user, setUser, setIsLoadingUser } = useAuth();
|
||||
const router = useRouter();
|
||||
const { setUser, setIsLoadingUser } = useAuth();
|
||||
|
||||
const {
|
||||
data: userResponse,
|
||||
isLoading: isLoadingUserResponse,
|
||||
error: userErrorResponse,
|
||||
} = useSWR<
|
||||
GetMeResponse & { ok?: boolean },
|
||||
AxiosError<BaseApiResponse>,
|
||||
SWRHttpKey
|
||||
>('/sso/userinfo', httpClientFetcher, {
|
||||
shouldRetryOnError: false,
|
||||
const { data: userResponse, isLoading: isLoadingUserResponse } =
|
||||
useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
|
||||
'/auth/sso/userinfo',
|
||||
httpClientFetcher,
|
||||
{
|
||||
shouldRetryOnError: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
refreshInterval: 0,
|
||||
}
|
||||
);
|
||||
|
||||
// refresh every 12 minutes
|
||||
refreshInterval: 12 * 60 * 1000,
|
||||
});
|
||||
useEffect(() => {
|
||||
setIsLoadingUser(isLoadingUserResponse);
|
||||
}, [isLoadingUserResponse, setIsLoadingUser]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(userResponse)) {
|
||||
setUser(userResponse.data);
|
||||
} else {
|
||||
// router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
||||
// TODO: remove this later, DONT HARDCODE USER DATA
|
||||
setUser(DUMMY_USER);
|
||||
}
|
||||
}, [userResponse, setUser]);
|
||||
}, [userResponse, setIsLoadingUser, setUser]);
|
||||
|
||||
// Explicitly handle 401 redirect from the component level
|
||||
useEffect(() => {
|
||||
if (
|
||||
isResponseError(userResponse) &&
|
||||
userErrorResponse?.response?.status === 401
|
||||
) {
|
||||
// Clear cache to prevent stale data from rendering children
|
||||
// mutate('/sso/userinfo', undefined, { revalidate: false }); // Optional: if using global mutate
|
||||
setUser(undefined);
|
||||
redirectToSSO();
|
||||
}
|
||||
}, [userErrorResponse, setUser, userResponse]);
|
||||
// TODO: uncomment this later
|
||||
// if (isLoadingUserResponse && !userResponse) {
|
||||
// return (
|
||||
// <div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
// <span className='loading loading-spinner loading-xl' />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoadingUser(isLoadingUserResponse);
|
||||
}, [isLoadingUserResponse]);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(
|
||||
async () => {
|
||||
await AuthApi.refresh();
|
||||
},
|
||||
12 * 60 * 1000
|
||||
);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const refreshUserSession = async () => {
|
||||
await AuthApi.refresh();
|
||||
};
|
||||
|
||||
refreshUserSession();
|
||||
}, []);
|
||||
|
||||
if (
|
||||
(isLoadingUserResponse && !userResponse && !userErrorResponse) ||
|
||||
(!userResponse && !userErrorResponse)
|
||||
) {
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoadingUserResponse && userErrorResponse) {
|
||||
return (
|
||||
<div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
|
||||
<h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
|
||||
<p className='text-gray-600'>
|
||||
Please try refreshing the page or contact support if the problem
|
||||
persists.
|
||||
</p>
|
||||
<button className='btn btn-primary' onClick={() => redirectToSSO()}>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{isResponseSuccess(userResponse) && user && children}</>;
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default RequireAuth;
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useAuth } from '@/services/hooks/useAuth';
|
||||
|
||||
interface RequirePermissionProps {
|
||||
children: React.ReactNode;
|
||||
permissions: string | string[];
|
||||
}
|
||||
|
||||
const RequirePermission = ({
|
||||
children,
|
||||
permissions,
|
||||
}: RequirePermissionProps) => {
|
||||
const { permissionCheck } = useAuth();
|
||||
|
||||
const isPermitted =
|
||||
typeof permissions === 'string'
|
||||
? permissionCheck(permissions)
|
||||
: permissions.some((permission) => permissionCheck(permission));
|
||||
|
||||
if (!isPermitted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default RequirePermission;
|
||||
@@ -1,104 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Link from 'next/link';
|
||||
import { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface DrawerHeaderProps {
|
||||
// Left side props
|
||||
leftIcon?: string;
|
||||
leftIconSize?: number;
|
||||
leftIconHref?: string;
|
||||
leftIconOnClick?: () => void;
|
||||
leftIconClassName?: string;
|
||||
|
||||
// Subtitle/label props
|
||||
subtitle?: string | ReactNode;
|
||||
subtitleClassName?: string;
|
||||
|
||||
// Right side actions (children)
|
||||
children?: ReactNode;
|
||||
|
||||
// Container props
|
||||
className?: string;
|
||||
showDivider?: boolean;
|
||||
}
|
||||
|
||||
const DrawerHeader = ({
|
||||
leftIcon = 'mdi:close',
|
||||
leftIconSize = 24,
|
||||
leftIconHref,
|
||||
leftIconOnClick,
|
||||
leftIconClassName,
|
||||
subtitle,
|
||||
subtitleClassName,
|
||||
children,
|
||||
className,
|
||||
showDivider = true,
|
||||
}: DrawerHeaderProps) => {
|
||||
const renderLeftIcon = () => {
|
||||
const iconElement = (
|
||||
<Icon
|
||||
icon={leftIcon}
|
||||
width={leftIconSize}
|
||||
height={leftIconSize}
|
||||
className={cn('cursor-pointer', leftIconClassName)}
|
||||
/>
|
||||
);
|
||||
|
||||
if (leftIconHref) {
|
||||
return (
|
||||
<Link href={leftIconHref} className='hover:text-gray-400'>
|
||||
{iconElement}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (leftIconOnClick) {
|
||||
return (
|
||||
<button
|
||||
onClick={leftIconOnClick}
|
||||
className='hover:text-gray-400 bg-transparent border-none p-0'
|
||||
>
|
||||
{iconElement}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return iconElement;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-row justify-between items-center px-4 pt-4',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Left Side */}
|
||||
<div className='flex flex-row h-full gap-2 items-center'>
|
||||
{renderLeftIcon()}
|
||||
|
||||
{showDivider && subtitle && (
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
)}
|
||||
|
||||
{subtitle && (
|
||||
<div className={cn('text-sm text-neutral', subtitleClassName)}>
|
||||
{subtitle}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Side Actions */}
|
||||
{children && (
|
||||
<div className='flex flex-row gap-3 justify-end items-center'>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawerHeader;
|
||||
@@ -1,49 +0,0 @@
|
||||
import Alert from '@/components/Alert';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useState } from 'react';
|
||||
|
||||
/**
|
||||
* Alert Unique Error List
|
||||
* @param formErrorList - Array of error messages
|
||||
* @param onClose - Function to close the alert
|
||||
*/
|
||||
const AlertErrorList = ({
|
||||
formErrorList,
|
||||
onClose,
|
||||
}: {
|
||||
formErrorList: string[];
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
if (formErrorList.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
|
||||
<div className='flex justify-between items-center gap-2 w-full'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Icon icon='material-symbols:error-outline' width={24} height={24} />
|
||||
<span className='font-semibold'>
|
||||
Terdapat {formErrorList.length} error pada form:
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
variant='link'
|
||||
className='ml-auto p-0 w-fit text-white'
|
||||
color='none'
|
||||
>
|
||||
<Icon icon='material-symbols:close' width={24} height={24} />
|
||||
</Button>
|
||||
</div>
|
||||
<ul className='list-disc list-inside pl-8 space-y-1 w-full'>
|
||||
{formErrorList.map((error, index) => (
|
||||
<li key={index} className='text-sm'>
|
||||
{error}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertErrorList;
|
||||
@@ -2,9 +2,8 @@
|
||||
|
||||
import { HTMLProps, useEffect, useRef } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Size } from '@/types/theme';
|
||||
|
||||
interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
|
||||
interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
|
||||
name: string;
|
||||
label?: string;
|
||||
indeterminate?: boolean;
|
||||
@@ -17,7 +16,6 @@ interface CheckboxInputProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
|
||||
isError?: boolean;
|
||||
isValid?: boolean;
|
||||
errorMessage?: string;
|
||||
size?: Size;
|
||||
}
|
||||
|
||||
const CheckboxInput = ({
|
||||
@@ -29,19 +27,10 @@ const CheckboxInput = ({
|
||||
isValid,
|
||||
isError,
|
||||
errorMessage,
|
||||
size = 'sm',
|
||||
...rest
|
||||
}: CheckboxInputProps) => {
|
||||
const ref = useRef<HTMLInputElement>(null!);
|
||||
|
||||
const checkboxBaseClassName = cn('checkbox cursor-pointer rounded-md', {
|
||||
'checkbox-xs': size === 'xs',
|
||||
'checkbox-sm': size === 'sm',
|
||||
'checkbox-md': size === 'md',
|
||||
'checkbox-lg': size === 'lg',
|
||||
'checkbox-xl': size === 'xl',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof indeterminate === 'boolean') {
|
||||
ref.current.indeterminate = !rest.checked && indeterminate;
|
||||
@@ -64,7 +53,7 @@ const CheckboxInput = ({
|
||||
id={name}
|
||||
name={name}
|
||||
className={cn(
|
||||
checkboxBaseClassName,
|
||||
'checkbox cursor-pointer',
|
||||
{
|
||||
'border-error': isError,
|
||||
'border-success': isValid,
|
||||
|
||||
@@ -7,11 +7,11 @@ import {
|
||||
useState,
|
||||
} from 'react';
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import { DateRange, DayPicker, Matcher } from 'react-day-picker';
|
||||
import 'react-day-picker/dist/style.css';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
export interface DateInputProps {
|
||||
label?: string;
|
||||
@@ -34,7 +34,6 @@ export interface DateInputProps {
|
||||
required?: boolean;
|
||||
isLoading?: boolean;
|
||||
isRange?: boolean;
|
||||
isNestedModal?: boolean; // New prop to indicate if used inside another modal
|
||||
errorMessage?: string;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
onBlur?: FocusEventHandler<HTMLInputElement>;
|
||||
@@ -59,7 +58,6 @@ const DateInput = ({
|
||||
readOnly = false,
|
||||
isLoading = false,
|
||||
isRange = false,
|
||||
isNestedModal = false,
|
||||
}: DateInputProps) => {
|
||||
const [internalError, setInternalError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Date | undefined>();
|
||||
@@ -76,7 +74,7 @@ const DateInput = ({
|
||||
? new Date(max.split('/').reverse().join('-'))
|
||||
: undefined;
|
||||
|
||||
const calendarModal = useModal(isNestedModal);
|
||||
const calendarModal = useModal();
|
||||
|
||||
// --- Sync value props ---
|
||||
useEffect(() => {
|
||||
@@ -266,7 +264,7 @@ const DateInput = ({
|
||||
ref={calendarModal.ref}
|
||||
className={{
|
||||
modal: 'rounded',
|
||||
modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`,
|
||||
modalBox: `w-fit min-h-${isRange ? '124' : '110'} flex flex-col`,
|
||||
}}
|
||||
closeOnBackdrop
|
||||
>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user