diff --git a/apps/mobile/app/(app)/category/index.tsx b/apps/mobile/app/(app)/category/index.tsx index e0bc5cb0..d406551d 100644 --- a/apps/mobile/app/(app)/category/index.tsx +++ b/apps/mobile/app/(app)/category/index.tsx @@ -7,11 +7,13 @@ import { t } from '@lingui/macro' import { useLingui } from '@lingui/react' import { useRouter } from 'expo-router' import { SectionList } from 'react-native' +import { useSafeAreaInsets } from 'react-native-safe-area-context' export default function CategoriesScreen() { const { i18n } = useLingui() const router = useRouter() const { data: categories = [], isLoading, refetch } = useCategories() + const { bottom } = useSafeAreaInsets() const incomeCategories = categories.filter( (category) => category.type === 'INCOME', @@ -27,14 +29,15 @@ export default function CategoriesScreen() { return ( item.id} renderItem={({ item: category }) => } renderSectionHeader={({ section: { title } }) => ( - {title} + {title} )} renderSectionFooter={({ section }) => ( <> diff --git a/apps/mobile/components/category/category-form.tsx b/apps/mobile/components/category/category-form.tsx index bd1c5776..d2dd1268 100644 --- a/apps/mobile/components/category/category-form.tsx +++ b/apps/mobile/components/category/category-form.tsx @@ -1,8 +1,12 @@ +import { + CATEGORY_EXPENSE_ICONS, + CATEGORY_INCOME_ICONS, +} from '@/lib/icons/category-icons' import { type CategoryFormValues, zCategoryFormValues } from '@6pm/validation' import { zodResolver } from '@hookform/resolvers/zod' import { t } from '@lingui/macro' import { useLingui } from '@lingui/react' -import { useRef } from 'react' +import { useEffect, useRef } from 'react' import { Controller, FormProvider, useForm } from 'react-hook-form' import { View } from 'react-native' import type { TextInput } from 'react-native' @@ -30,13 +34,24 @@ export const CategoryForm = ({ resolver: zodResolver(zCategoryFormValues), defaultValues: { name: '', - icon: 'CreditCard', + icon: + defaultValues?.type === 'INCOME' + ? CATEGORY_INCOME_ICONS[0] + : CATEGORY_EXPENSE_ICONS[0], ...defaultValues, type: defaultValues?.type || 'EXPENSE', }, }) const type = categoryForm.watch('type') + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + categoryForm.setValue( + 'icon', + type === 'INCOME' ? CATEGORY_INCOME_ICONS[0] : CATEGORY_EXPENSE_ICONS[0], + ) + }, [type]) + const isTypeHidden = hiddenFields.includes('type') return ( diff --git a/apps/mobile/lib/icons/category-icons.ts b/apps/mobile/lib/icons/category-icons.ts index 5ccb0a3d..7a98779f 100644 --- a/apps/mobile/lib/icons/category-icons.ts +++ b/apps/mobile/lib/icons/category-icons.ts @@ -1,30 +1,58 @@ import type { icons } from 'lucide-react-native' export const CATEGORY_EXPENSE_ICONS: Array = [ - 'WalletMinimal', - 'Coins', - 'Banknote', - 'Bitcoin', - 'CreditCard', - 'Gem', - 'HandCoins', - 'Handshake', - 'PiggyBank', - 'SmartphoneNfc', - 'BadgeCent', - 'BadgeDollarSign', - 'BadgeEuro', - 'BadgeIndianRupee', - 'BadgeJapaneseYen', - 'BadgePoundSterling', - 'BadgeRussianRuble', - 'BadgeSwissFranc', - // 'Paintbrush', - // 'BrickWall', - // 'CookingPot', + 'Banana', + 'ChefHat', + 'Apple', + 'Beef', + 'Cake', + 'Citrus', + 'Cherry', + 'Croissant', + 'CupSoda', + 'Drumstick', + 'Salad', + 'Coffee', + 'Popcorn', + 'Sandwich', + 'Utensils', + 'Pizza', + 'Wine', + 'Armchair', + 'Lamp', + 'BedDouble', + 'Drill', + 'Home', + 'Refrigerator', + 'Cat', + 'Bird', + 'Dog', + 'Rabbit', + 'Fish', + 'Turtle', + 'Shirt', + 'ShoppingBasket', + 'Luggage', + 'Plane', + 'TentTree', + 'CarFront', + 'CarTaxiFront', + 'Ship', + 'TrainFront', + 'Dumbbell', + 'Pill', + 'Hospital', + 'Stethoscope', + 'Ribbon', + 'Cannabis', + 'Sprout', + 'Flower2', + 'TreePalm', + 'CircleHelp', ] export const CATEGORY_INCOME_ICONS: Array = [ + 'CircleHelp', 'WalletMinimal', 'Coins', 'Banknote', @@ -36,14 +64,10 @@ export const CATEGORY_INCOME_ICONS: Array = [ 'PiggyBank', 'SmartphoneNfc', 'BadgeCent', - 'BadgeDollarSign', - 'BadgeEuro', - 'BadgeIndianRupee', - 'BadgeJapaneseYen', - 'BadgePoundSterling', - 'BadgeRussianRuble', - 'BadgeSwissFranc', - // 'Paintbrush', - // 'BrickWall', - // 'CookingPot', + 'Trophy', + 'Clover', + 'LineChart', + 'Store', + 'BriefcaseBusiness', + 'Building2', ].reverse() as Array