feat: isRequired for fields now respected

app/(app)/settings/actions.ts

@@ -240,6 +240,7 @@ export async function addFieldAction(userId: string, data: Prisma.FieldCreateInp
     llm_prompt: validatedForm.data.llm_prompt,
     isVisibleInList: validatedForm.data.isVisibleInList,
     isVisibleInAnalysis: validatedForm.data.isVisibleInAnalysis,
+    isRequired: validatedForm.data.isRequired,
     isExtra: true,
   })
   revalidatePath("/settings/fields")
@@ -260,6 +261,7 @@ export async function editFieldAction(userId: string, code: string, data: Prisma
     llm_prompt: validatedForm.data.llm_prompt,
     isVisibleInList: validatedForm.data.isVisibleInList,
     isVisibleInAnalysis: validatedForm.data.isVisibleInAnalysis,
+    isRequired: validatedForm.data.isRequired,
   })
   revalidatePath("/settings/fields")
 

app/(app)/settings/fields/page.tsx

@@ -48,6 +48,13 @@ export default async function FieldsSettingsPage() {
             defaultValue: false,
             editable: true,
           },
+          {
+            key: "isRequired",
+            label: "Is required",
+            type: "checkbox",
+            defaultValue: false,
+            editable: true,
+          },
         ]}
         onDelete={async (code) => {
           "use server"

components/forms/select-category.tsx

@@ -11,6 +11,7 @@ export const FormSelectCategory = ({
   emptyValue,
   placeholder,
   hideIfEmpty = false,
+  isRequired = false,
   ...props
 }: {
   title: string
@@ -18,6 +19,7 @@ export const FormSelectCategory = ({
   emptyValue?: string
   placeholder?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 } & SelectProps) => {
   const items = useMemo(
     () => categories.map((category) => ({ code: category.code, name: category.name, color: category.color })),
@@ -30,6 +32,7 @@ export const FormSelectCategory = ({
       emptyValue={emptyValue}
       placeholder={placeholder}
       hideIfEmpty={hideIfEmpty}
+      isRequired={isRequired}
       {...props}
     />
   )

components/forms/select-currency.tsx

@@ -8,6 +8,7 @@ export const FormSelectCurrency = ({
   emptyValue,
   placeholder,
   hideIfEmpty = false,
+  isRequired = false,
   ...props
 }: {
   currencies: { code: string; name: string }[]
@@ -15,6 +16,7 @@ export const FormSelectCurrency = ({
   emptyValue?: string
   placeholder?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 } & SelectProps) => {
   const items = useMemo(
     () =>
@@ -32,6 +34,7 @@ export const FormSelectCurrency = ({
       emptyValue={emptyValue}
       placeholder={placeholder}
       hideIfEmpty={hideIfEmpty}
+      isRequired={isRequired}
       {...props}
     />
   )

components/forms/select-project.tsx

@@ -8,6 +8,7 @@ export const FormSelectProject = ({
   emptyValue,
   placeholder,
   hideIfEmpty = false,
+  isRequired = false,
   ...props
 }: {
   title: string
@@ -15,6 +16,7 @@ export const FormSelectProject = ({
   emptyValue?: string
   placeholder?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 } & SelectProps) => {
   return (
     <FormSelect
@@ -23,6 +25,7 @@ export const FormSelectProject = ({
       emptyValue={emptyValue}
       placeholder={placeholder}
       hideIfEmpty={hideIfEmpty}
+      isRequired={isRequired}
       {...props}
     />
   )

components/forms/select-type.tsx

@@ -6,8 +6,15 @@ export const FormSelectType = ({
   emptyValue,
   placeholder,
   hideIfEmpty = false,
+  isRequired = false,
   ...props
-}: { title: string; emptyValue?: string; placeholder?: string; hideIfEmpty?: boolean } & SelectProps) => {
+}: {
+  title: string
+  emptyValue?: string
+  placeholder?: string
+  hideIfEmpty?: boolean
+  isRequired?: boolean
+} & SelectProps) => {
   const items = [
     { code: "expense", name: "Expense", badge: "↓" },
     { code: "income", name: "Income", badge: "↑" },
@@ -22,6 +29,7 @@ export const FormSelectType = ({
       emptyValue={emptyValue}
       placeholder={placeholder}
       hideIfEmpty={hideIfEmpty}
+      isRequired={isRequired}
       {...props}
     />
   )

components/forms/simple.tsx

@@ -16,17 +16,20 @@ import { InputHTMLAttributes, TextareaHTMLAttributes, useEffect, useRef, useStat
 type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {
   title?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 }
 
-export function FormInput({ title, hideIfEmpty = false, ...props }: FormInputProps) {
+export function FormInput({ title, hideIfEmpty = false, isRequired = false, ...props }: FormInputProps) {
-  if (hideIfEmpty && (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value) {
+  const isEmpty = (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value
+
+  if (hideIfEmpty && isEmpty) {
     return null
   }
 
   return (
     <label className="flex flex-col gap-1">
       {title && <span className="text-sm font-medium">{title}</span>}
-      <Input {...props} className={cn("bg-background", props.className)} />
+      <Input {...props} className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)} />
     </label>
   )
 }
@@ -34,10 +37,12 @@ export function FormInput({ title, hideIfEmpty = false, ...props }: FormInputPro
 type FormTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   title?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 }
 
-export function FormTextarea({ title, hideIfEmpty = false, ...props }: FormTextareaProps) {
+export function FormTextarea({ title, hideIfEmpty = false, isRequired = false, ...props }: FormTextareaProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const isEmpty = (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value
 
   useEffect(() => {
     const textarea = textareaRef.current
@@ -54,14 +59,18 @@ export function FormTextarea({ title, hideIfEmpty = false, ...props }: FormTexta
     return () => textarea.removeEventListener("input", resize)
   }, [props.value, props.defaultValue])
 
-  if (hideIfEmpty && (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value) {
+  if (hideIfEmpty && isEmpty) {
     return null
   }
 
   return (
     <label className="flex flex-col gap-1">
       {title && <span className="text-sm font-medium">{title}</span>}
-      <Textarea ref={textareaRef} {...props} className={cn("bg-background", props.className)} />
+      <Textarea
+        ref={textareaRef}
+        {...props}
+        className={cn("bg-background", isRequired && isEmpty && "bg-yellow-50", props.className)}
+      />
     </label>
   )
 }
@@ -72,6 +81,7 @@ export const FormSelect = ({
   emptyValue,
   placeholder,
   hideIfEmpty = false,
+  isRequired = false,
   ...props
 }: {
   items: Array<{ code: string; name: string; color?: string; badge?: string }>
@@ -79,8 +89,11 @@ export const FormSelect = ({
   emptyValue?: string
   placeholder?: string
   hideIfEmpty?: boolean
+  isRequired?: boolean
 } & SelectProps) => {
-  if (hideIfEmpty && (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value) {
+  const isEmpty = (!props.defaultValue || props.defaultValue.toString().trim() === "") && !props.value
+
+  if (hideIfEmpty && isEmpty) {
     return null
   }
 
@@ -88,7 +101,7 @@ export const FormSelect = ({
     <span className="flex flex-col gap-1">
       {title && <span className="text-sm font-medium">{title}</span>}
       <Select {...props}>
-        <SelectTrigger className="w-full min-w-[150px] bg-background">
+        <SelectTrigger className={cn("w-full min-w-[150px] bg-background", isRequired && isEmpty && "bg-yellow-50")}>
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>

components/transactions/edit.tsx

@@ -85,11 +85,26 @@ export default function TransactionEditForm({
     <form action={saveAction} className="space-y-4">
       <input type="hidden" name="transactionId" value={transaction.id} />
 
-      <FormInput title={fieldMap.name.name} name="name" defaultValue={formData.name} />
+      <FormInput
+        title={fieldMap.name.name}
+        name="name"
+        defaultValue={formData.name}
+        isRequired={fieldMap.name.isRequired}
+      />
 
-      <FormInput title={fieldMap.merchant.name} name="merchant" defaultValue={formData.merchant} />
+      <FormInput
+        title={fieldMap.merchant.name}
+        name="merchant"
+        defaultValue={formData.merchant}
+        isRequired={fieldMap.merchant.isRequired}
+      />
 
-      <FormInput title={fieldMap.description.name} name="description" defaultValue={formData.description} />
+      <FormInput
+        title={fieldMap.description.name}
+        name="description"
+        defaultValue={formData.description}
+        isRequired={fieldMap.description.isRequired}
+      />
 
       <div className="flex flex-row gap-4">
         <FormInput
@@ -99,6 +114,7 @@ export default function TransactionEditForm({
           name="total"
           defaultValue={formData.total.toFixed(2)}
           className="w-32"
+          isRequired={fieldMap.total.isRequired}
         />
 
         <FormSelectCurrency
@@ -109,9 +125,15 @@ export default function TransactionEditForm({
             setFormData({ ...formData, currencyCode: value })
           }}
           currencies={currencies}
+          isRequired={fieldMap.currencyCode.isRequired}
         />
 
-        <FormSelectType title={fieldMap.type.name} name="type" defaultValue={formData.type} />
+        <FormSelectType
+          title={fieldMap.type.name}
+          name="type"
+          defaultValue={formData.type}
+          isRequired={fieldMap.type.isRequired}
+        />
       </div>
 
       {formData.currencyCode !== settings.default_currency || formData.convertedTotal !== 0 ? (
@@ -122,6 +144,7 @@ export default function TransactionEditForm({
             step="0.01"
             name="convertedTotal"
             defaultValue={formData.convertedTotal.toFixed(2)}
+            isRequired={fieldMap.convertedTotal.isRequired}
           />
           {(!formData.convertedCurrencyCode || formData.convertedCurrencyCode !== settings.default_currency) && (
             <FormSelectCurrency
@@ -129,6 +152,7 @@ export default function TransactionEditForm({
               name="convertedCurrencyCode"
               defaultValue={formData.convertedCurrencyCode || settings.default_currency}
               currencies={currencies}
+              isRequired={fieldMap.convertedCurrencyCode.isRequired}
             />
           )}
         </div>
@@ -137,7 +161,13 @@ export default function TransactionEditForm({
       )}
 
       <div className="flex flex-row flex-grow gap-4">
-        <FormInput title={fieldMap.issuedAt.name} type="date" name="issuedAt" defaultValue={formData.issuedAt} />
+        <FormInput
+          title={fieldMap.issuedAt.name}
+          type="date"
+          name="issuedAt"
+          defaultValue={formData.issuedAt}
+          isRequired={fieldMap.issuedAt.isRequired}
+        />
       </div>
 
       <div className="flex flex-row gap-4">
@@ -146,6 +176,7 @@ export default function TransactionEditForm({
           categories={categories}
           name="categoryCode"
           defaultValue={formData.categoryCode}
+          isRequired={fieldMap.categoryCode.isRequired}
         />
 
         <FormSelectProject
@@ -153,10 +184,17 @@ export default function TransactionEditForm({
           projects={projects}
           name="projectCode"
           defaultValue={formData.projectCode}
+          isRequired={fieldMap.projectCode.isRequired}
         />
       </div>
 
-      <FormTextarea title={fieldMap.note.name} name="note" defaultValue={formData.note} className="h-24" />
+      <FormTextarea
+        title={fieldMap.note.name}
+        name="note"
+        defaultValue={formData.note}
+        className="h-24"
+        isRequired={fieldMap.note.isRequired}
+      />
       {extraFields.map((field) => (
         <FormInput
           key={field.code}
@@ -164,6 +202,7 @@ export default function TransactionEditForm({
           title={field.name}
           name={field.code}
           defaultValue={formData[field.code as keyof typeof formData] || ""}
+          isRequired={field.isRequired}
         />
       ))}
 

components/transactions/list.tsx

@@ -230,6 +230,19 @@ export function TransactionList({ transactions, fields = [] }: { transactions: T
     ) : null
   }
 
+  // Function to check if a transaction is incomplete
+  const isTransactionIncomplete = (transaction: Transaction): boolean => {
+    const requiredFields = fields.filter((field) => field.isRequired)
+
+    return requiredFields.some((field) => {
+      const value = field.isExtra
+        ? (transaction.extra as Record<string, any>)?.[field.code]
+        : transaction[field.code as keyof Transaction]
+
+      return value === undefined || value === null || value === "" || value === 0
+    })
+  }
+
   return (
     <div className="rounded-md border">
       <Table>
@@ -257,7 +270,11 @@ export function TransactionList({ transactions, fields = [] }: { transactions: T
           {transactions.map((transaction) => (
             <TableRow
               key={transaction.id}
-              className={cn(selectedIds.includes(transaction.id) && "bg-muted", "cursor-pointer hover:bg-muted/50")}
+              className={cn(
+                isTransactionIncomplete(transaction) && "bg-yellow-50",
+                selectedIds.includes(transaction.id) && "bg-muted",
+                "cursor-pointer hover:bg-muted/50"
+              )}
               onClick={() => handleRowClick(transaction.id)}
             >
               <TableCell onClick={(e) => e.stopPropagation()}>

forms/settings.ts

@@ -34,4 +34,5 @@ export const fieldFormSchema = z.object({
   llm_prompt: z.string().max(512).nullable().optional(),
   isVisibleInList: z.boolean().optional(),
   isVisibleInAnalysis: z.boolean().optional(),
+  isRequired: z.boolean().optional(),
 })

models/defaults.ts

@@ -317,7 +317,7 @@ export const DEFAULT_FIELDS = [
     llm_prompt: "issued at date (YYYY-MM-DD format)",
     isVisibleInList: true,
     isVisibleInAnalysis: true,
-    isRequired: false,
+    isRequired: true,
     isExtra: false,
   },
   {
@@ -357,7 +357,7 @@ export const DEFAULT_FIELDS = [
     llm_prompt: "total total of the transaction",
     isVisibleInList: true,
     isVisibleInAnalysis: true,
-    isRequired: false,
+    isRequired: true,
     isExtra: false,
   },
   {