feat: pagination + hide fields in settings

components/forms/select-category.tsx

@@ -10,11 +10,27 @@ export const FormSelectCategory = ({
   categories,
   emptyValue,
   placeholder,
+  hideIfEmpty = false,
   ...props
-}: { title: string; categories: Category[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  categories: Category[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
   const items = useMemo(
     () => categories.map((category) => ({ code: category.code, name: category.name, color: category.color })),
     [categories]
   )
-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }

components/forms/select-currency.tsx

@@ -8,11 +8,27 @@ export const FormSelectCurrency = ({
   currencies,
   emptyValue,
   placeholder,
+  hideIfEmpty = false,
   ...props
-}: { title: string; currencies: Currency[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  currencies: Currency[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
   const items = useMemo(
     () => currencies.map((currency) => ({ code: currency.code, name: `${currency.code} - ${currency.name}` })),
     [currencies]
   )
-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }

components/forms/select-project.tsx

@@ -7,14 +7,22 @@ export const FormSelectProject = ({
   projects,
   emptyValue,
   placeholder,
+  hideIfEmpty = false,
   ...props
-}: { title: string; projects: Project[]; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: {
+  title: string
+  projects: Project[]
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+} & SelectProps) => {
   return (
     <FormSelect
       title={title}
       items={projects.map((project) => ({ code: project.code, name: project.name, color: project.color }))}
       emptyValue={emptyValue}
       placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
       {...props}
     />
   )

components/forms/select-type.tsx

@@ -5,8 +5,9 @@ export const FormSelectType = ({
   title,
   emptyValue,
   placeholder,
+  hideIfEmpty = false,
   ...props
-}: { title: string; emptyValue?: string; placeholder?: string } & SelectProps) => {
+}: { title: string; emptyValue?: string; placeholder?: string; hideIfEmpty?: boolean } & SelectProps) => {
   const items = [
     { code: "expense", name: "Expense" },
     { code: "income", name: "Income" },
@@ -14,5 +15,14 @@ export const FormSelectType = ({
     { code: "other", name: "Other" },
   ]
 
-  return <FormSelect title={title} items={items} emptyValue={emptyValue} placeholder={placeholder} {...props} />
+  return (
+    <FormSelect
+      title={title}
+      items={items}
+      emptyValue={emptyValue}
+      placeholder={placeholder}
+      hideIfEmpty={hideIfEmpty}
+      {...props}
+    />
+  )
 }

components/forms/simple.tsx

@@ -53,13 +53,19 @@ export const FormSelect = ({
   items,
   emptyValue,
   placeholder,
+  hideIfEmpty = false,
   ...props
 }: {
   title: string
   items: Array<{ code: string; name: string; color?: string }>
   emptyValue?: string
   placeholder?: string
+  hideIfEmpty?: boolean
 } & SelectProps) => {
+  if (hideIfEmpty && (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value) {
+    return null
+  }
+
   return (
     <span className="flex flex-col gap-1">
       <span className="text-sm font-medium">{title}</span>