diff --git a/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx
new file mode 100644
index 0000000..08dd739
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/expense/page.tsx
@@ -0,0 +1,7 @@
+import ExpenseList from '@/views/apps/expense/list'
+
+const ExpensePage = () => {
+ return
+}
+
+export default ExpensePage
diff --git a/src/components/RangeDatePicker.tsx b/src/components/RangeDatePicker.tsx
new file mode 100644
index 0000000..774a0de
--- /dev/null
+++ b/src/components/RangeDatePicker.tsx
@@ -0,0 +1,276 @@
+// React Imports
+import React from 'react'
+
+// MUI Imports
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+import type { TextFieldProps } from '@mui/material/TextField'
+
+interface DateRangePickerProps {
+ /**
+ * Start date value (Date object or date string)
+ */
+ startDate: Date | string | null
+ /**
+ * End date value (Date object or date string)
+ */
+ endDate: Date | string | null
+ /**
+ * Callback when start date changes
+ */
+ onStartDateChange: (date: Date | null) => void
+ /**
+ * Callback when end date changes
+ */
+ onEndDateChange: (date: Date | null) => void
+ /**
+ * Label for start date field
+ */
+ startLabel?: string
+ /**
+ * Label for end date field
+ */
+ endLabel?: string
+ /**
+ * Placeholder for start date field
+ */
+ startPlaceholder?: string
+ /**
+ * Placeholder for end date field
+ */
+ endPlaceholder?: string
+ /**
+ * Size of the text fields
+ */
+ size?: 'small' | 'medium'
+ /**
+ * Whether the fields are disabled
+ */
+ disabled?: boolean
+ /**
+ * Whether the fields are required
+ */
+ required?: boolean
+ /**
+ * Custom className for the container
+ */
+ className?: string
+ /**
+ * Custom styles for the container
+ */
+ containerStyle?: React.CSSProperties
+ /**
+ * Separator between date fields
+ */
+ separator?: string
+ /**
+ * Custom props for start date TextField
+ */
+ startTextFieldProps?: Omit
+ /**
+ * Custom props for end date TextField
+ */
+ endTextFieldProps?: Omit
+ /**
+ * Error state for start date
+ */
+ startError?: boolean
+ /**
+ * Error state for end date
+ */
+ endError?: boolean
+ /**
+ * Helper text for start date
+ */
+ startHelperText?: string
+ /**
+ * Helper text for end date
+ */
+ endHelperText?: string
+}
+
+// Utility functions
+const formatDateForInput = (date: Date | string | null): string => {
+ if (!date) return ''
+
+ const dateObj = typeof date === 'string' ? new Date(date) : date
+
+ if (isNaN(dateObj.getTime())) return ''
+
+ return dateObj.toISOString().split('T')[0]
+}
+
+const parseDateFromInput = (dateString: string): Date | null => {
+ if (!dateString) return null
+
+ const date = new Date(dateString)
+ return isNaN(date.getTime()) ? null : date
+}
+
+const DateRangePicker: React.FC = ({
+ startDate,
+ endDate,
+ onStartDateChange,
+ onEndDateChange,
+ startLabel,
+ endLabel,
+ startPlaceholder,
+ endPlaceholder,
+ size = 'small',
+ disabled = false,
+ required = false,
+ className = '',
+ containerStyle = {},
+ separator = '-',
+ startTextFieldProps = {},
+ endTextFieldProps = {},
+ startError = false,
+ endError = false,
+ startHelperText,
+ endHelperText
+}) => {
+ const theme = useTheme()
+
+ const defaultTextFieldSx = {
+ '& .MuiOutlinedInput-root': {
+ '&.Mui-focused fieldset': {
+ borderColor: 'primary.main'
+ },
+ '& fieldset': {
+ borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
+ }
+ }
+ }
+
+ const handleStartDateChange = (event: React.ChangeEvent) => {
+ const date = parseDateFromInput(event.target.value)
+ onStartDateChange(date)
+ }
+
+ const handleEndDateChange = (event: React.ChangeEvent) => {
+ const date = parseDateFromInput(event.target.value)
+ onEndDateChange(date)
+ }
+
+ return (
+
+
+
+
+ {separator}
+
+
+
+
+ )
+}
+
+export default DateRangePicker
+
+// Export utility functions for external use
+export { formatDateForInput, parseDateFromInput }
+
+// Example usage:
+/*
+import DateRangePicker from '@/components/DateRangePicker'
+
+// In your component:
+const [startDate, setStartDate] = useState(new Date())
+const [endDate, setEndDate] = useState(new Date())
+
+// Basic usage
+
+
+// With labels and validation
+ endDate}
+ endError={startDate && endDate && startDate > endDate}
+ startHelperText={startDate && endDate && startDate > endDate ? "Tanggal mulai tidak boleh lebih besar dari tanggal selesai" : ""}
+/>
+
+// Custom styling
+
+
+// Integration with your existing filter logic
+const handleDateRangeChange = (start: Date | null, end: Date | null) => {
+ setFilter({
+ ...filter,
+ date_from: start ? formatDateDDMMYYYY(start) : null,
+ date_to: end ? formatDateDDMMYYYY(end) : null
+ })
+}
+
+ handleDateRangeChange(date, filter.date_to ? new Date(filter.date_to) : null)}
+ onEndDateChange={(date) => handleDateRangeChange(filter.date_from ? new Date(filter.date_from) : null, date)}
+/>
+*/
diff --git a/src/components/StatusFilterTab.tsx b/src/components/StatusFilterTab.tsx
new file mode 100644
index 0000000..861d2ae
--- /dev/null
+++ b/src/components/StatusFilterTab.tsx
@@ -0,0 +1,249 @@
+// React Imports
+import React, { useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import { styled } from '@mui/material/styles'
+
+const DropdownButton = styled(Button)(({ theme }) => ({
+ textTransform: 'none',
+ fontWeight: 400,
+ borderRadius: '8px',
+ borderColor: '#e0e0e0',
+ color: '#666',
+ '&:hover': {
+ borderColor: '#ccc',
+ backgroundColor: 'rgba(0, 0, 0, 0.04)'
+ }
+}))
+
+interface StatusFilterTabsProps {
+ /**
+ * Array of status options to display as filter tabs
+ */
+ statusOptions: string[]
+ /**
+ * Currently selected status filter
+ */
+ selectedStatus: string
+ /**
+ * Callback function when a status is selected
+ */
+ onStatusChange: (status: string) => void
+ /**
+ * Custom className for the container
+ */
+ className?: string
+ /**
+ * Custom styles for the container
+ */
+ containerStyle?: React.CSSProperties
+ /**
+ * Size of the buttons
+ */
+ buttonSize?: 'small' | 'medium' | 'large'
+ /**
+ * Maximum number of status options to show as buttons before switching to dropdown
+ */
+ maxButtonsBeforeDropdown?: number
+ /**
+ * Label for the dropdown when there are many options
+ */
+ dropdownLabel?: string
+}
+
+const StatusFilterTabs: React.FC = ({
+ statusOptions,
+ selectedStatus,
+ onStatusChange,
+ className = '',
+ containerStyle = {},
+ buttonSize = 'small',
+ maxButtonsBeforeDropdown = 5,
+ dropdownLabel = 'Lainnya'
+}) => {
+ const [anchorEl, setAnchorEl] = useState(null)
+ const open = Boolean(anchorEl)
+
+ const handleDropdownClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleDropdownClose = () => {
+ setAnchorEl(null)
+ }
+
+ const handleDropdownItemClick = (status: string) => {
+ onStatusChange(status)
+ handleDropdownClose()
+ }
+
+ // If status options are <= maxButtonsBeforeDropdown, show all as buttons
+ if (statusOptions.length <= maxButtonsBeforeDropdown) {
+ return (
+
+ {statusOptions.map(status => (
+
+ ))}
+
+ )
+ }
+
+ // If more than maxButtonsBeforeDropdown, show first few as buttons and rest in dropdown
+ const buttonStatuses = statusOptions.slice(0, maxButtonsBeforeDropdown - 1)
+ const dropdownStatuses = statusOptions.slice(maxButtonsBeforeDropdown - 1)
+ const isDropdownItemSelected = dropdownStatuses.includes(selectedStatus)
+
+ return (
+