From eb0f04310ebe8f655f192b4d17dae7f17d4abf32 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:00 +0700 Subject: [PATCH 1/6] chore(FE-91): create daisyui.css file for extending daisyUI style --- src/app/globals.css | 1 + src/styles/daisyui.css | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 src/styles/daisyui.css diff --git a/src/app/globals.css b/src/app/globals.css index 386e7620..79af241b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,6 @@ @import 'tailwindcss'; @plugin "daisyui"; +@import '../styles/daisyui.css'; :root { --color-primary: #1f74bf; diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css new file mode 100644 index 00000000..9a148fb4 --- /dev/null +++ b/src/styles/daisyui.css @@ -0,0 +1,11 @@ +@layer utilities { + .step.step-success::before { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + + .step.step-error::before { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } +} From 156de6112bb88d62cf41054b738a764ed024c94a Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:14 +0700 Subject: [PATCH 2/6] feat(FE-91): create Tooltip component --- src/components/Tooltip.tsx | 60 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/Tooltip.tsx diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx new file mode 100644 index 00000000..02f86dca --- /dev/null +++ b/src/components/Tooltip.tsx @@ -0,0 +1,60 @@ +import { ReactNode } from 'react'; + +import { cn } from '@/lib/helper'; +import { Color } from '@/types/theme'; + +interface TooltipProps { + children?: ReactNode; + content?: ReactNode; + className?: { + wrapper?: string; + content?: string; + }; + open?: boolean; + color?: Color; + position?: 'top' | 'bottom' | 'left' | 'right'; +} + +const Tooltip = ({ + children, + content, + className, + open, + color, + position, +}: TooltipProps) => { + const tooltipBaseClassName = cn('tooltip', { + 'tooltip-open': typeof open === 'boolean' && open, + + 'tooltip-top': position === 'top', + 'tooltip-bottom': position === 'bottom', + 'tooltip-left': position === 'left', + 'tooltip-right': position === 'right', + + 'tooltip-primary': color === 'primary', + 'tooltip-secondary': color === 'secondary', + 'tooltip-accent': color === 'accent', + 'tooltip-neutral': color === 'neutral', + 'tooltip-info': color === 'info', + 'tooltip-success': color === 'success', + 'tooltip-warning': color === 'warning', + 'tooltip-error': color === 'error', + }); + return ( +
+
+ {content} +
+ + {children} +
+ ); +}; + +export default Tooltip; From 76dd2e4c54a929103625a20dcc76ceb76d0263ea Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:23 +0700 Subject: [PATCH 3/6] feat(FE-91): create Steps component --- src/components/steps/Steps.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/components/steps/Steps.tsx diff --git a/src/components/steps/Steps.tsx b/src/components/steps/Steps.tsx new file mode 100644 index 00000000..29d307e1 --- /dev/null +++ b/src/components/steps/Steps.tsx @@ -0,0 +1,23 @@ +import { ReactNode } from 'react'; +import { cn } from '@/lib/helper'; + +interface StepsProps { + children?: ReactNode; + className?: string; + direction?: 'horizontal' | 'vertical'; +} + +const Steps = ({ children, className, direction }: StepsProps) => { + const stepsBaseClassName = cn('steps gap-2', { + 'steps-horizontal': direction === 'horizontal', + 'steps-vertical': direction === 'vertical', + }); + + return ( +
    + {children} +
+ ); +}; + +export default Steps; From 0577f6ce1d6875d33af23a691f0d61bf122fef2f Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:29 +0700 Subject: [PATCH 4/6] feat(FE-91): create StepItem component --- src/components/steps/StepItem.tsx | 34 +++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/steps/StepItem.tsx diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx new file mode 100644 index 00000000..85ec4f3e --- /dev/null +++ b/src/components/steps/StepItem.tsx @@ -0,0 +1,34 @@ +import { ReactNode } from 'react'; + +import { cn } from '@/lib/helper'; +import { Color } from '@/types/theme'; + +interface StepItemProps { + children?: ReactNode; + icon?: ReactNode; + className?: string; + color?: Color; +} + +const StepItem = ({ children, icon, className, color }: StepItemProps) => { + const stepItemBaseClassName = cn('step', { + 'step-primary': color === 'primary', + 'step-secondary': color === 'secondary', + 'step-accent': color === 'accent', + 'step-neutral': color === 'neutral', + 'step-info': color === 'info', + 'step-success': color === 'success', + 'step-warning': color === 'warning', + 'step-error': color === 'error', + }); + + return ( +
  • + {icon} + +
    {children}
    +
    • + ); +}; + +export default StepItem; From 93beb86f910fe0bcadecb3c4ded5498893c79af1 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:40 +0700 Subject: [PATCH 5/6] feat(FE-91): create ApprovalSteps component --- src/components/pages/ApprovalSteps.tsx | 64 ++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/components/pages/ApprovalSteps.tsx diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx new file mode 100644 index 00000000..4022e254 --- /dev/null +++ b/src/components/pages/ApprovalSteps.tsx @@ -0,0 +1,64 @@ +import { Icon } from '@iconify/react'; +import Steps from '@/components/steps/Steps'; +import StepItem from '@/components/steps/StepItem'; +import Tooltip from '@/components/Tooltip'; + +import { formatDate } from '@/lib/helper'; +import { ApprovalsLine } from '@/types/api/api-general'; + +interface ApprovalStepsProps { + approvals: ApprovalsLine; +} + +const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => { + return ( + + {approvals.map((approval, idx) => { + const stepItemColor = + approval.status === 'approved' + ? 'success' + : approval.status === 'rejected' + ? 'error' + : undefined; + + const stepItemIcon = + approval.status === 'approved' + ? 'material-symbols:check-rounded' + : approval.status === 'rejected' + ? 'material-symbols:close-rounded' + : 'bxs:hourglass'; + + return ( + + {formatDate(approval.date, 'YYYY-MM-DD')} + Oleh: {approval.action_by} + Catatan: {approval.notes} + + } + > + + + ) + } + > + {approval.role} + + ); + })} + + ); +}; + +export default ApprovalSteps; From b7a30cc73adb2f9c874f8d5539cbf5cfe8d8e8b8 Mon Sep 17 00:00:00 2001 From: ValdiANS Date: Thu, 16 Oct 2025 10:01:50 +0700 Subject: [PATCH 6/6] chore(FE-91): create ApprovalsLine type --- src/types/api/api-general.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts index 6a3fc6be..cf3e57f7 100644 --- a/src/types/api/api-general.d.ts +++ b/src/types/api/api-general.d.ts @@ -66,3 +66,11 @@ export type flags = | 'STARTER' | 'FINISHER' | 'OVK'; + +export type ApprovalsLine = { + action_by?: string; + date?: string; + notes?: string; + role?: string; + status: 'approved' | 'rejected' | 'waiting'; +}[];