feat: enhance public notes functionality with flexible options (#141)

* feat: enhance public notes functionality with flexible options

- Make public notes optional to prevent default values causing frontend issues
- Add dual editing modes: raw text editing and custom fields (avoid hardcoded schema)
- Set raw text mode as default, populate input on edit, submit raw text content always
- Add toggle switch: submit raw text when enabled, submit empty & hide controls when disabled
- New records default to disabled public notes; auto-expand on edit based on content

* chore: auto-fix linting and formatting issues

* feat: Add public annotation data structure and utility functions

Implemented Zod validation patterns, default values, parsing functions, and utility functions for public notes, and updated related internationalization text.

* chore: auto-fix linting and formatting issues

* refactor(server): Replace i18n implementation

Replace direct use of i18n.t with react-i18next's useTranslation hook to improve internationalization support.

* refactor(public-note): Optimize data model and validation logic

Removed the pruneEmpty function and simplified the date processing logic, making billingDataMod and planDataMod optional fields. Also optimized the validation logic to handle optional fields.

* chore: auto-fix linting and formatting issues

* fix zod validation & don't write empty values when parsing

* use raw mode if object contains unknown fields

* rename some features

* chore: Update dependency package versions

Upgrade multiple npm dependencies to their latest versions, including react, tailwindcss, and eslint. Ignore lock files.

* fix(server): Fix default value when bill amount is undefined

Changed undefined values ​​for bill amount to the default value "0" to avoid potential null value errors.

---------

Co-authored-by: Guccen <171530509+Chillln@users.noreply.github.com>
Co-authored-by: uubulb <uub@suwako.de>

src/components/ui/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes, forwardRef } from "react"
 
 const AlertDialog = AlertDialogPrimitive.Root
 

src/components/ui/avatar.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Avatar = forwardRef<
     ComponentRef<typeof AvatarPrimitive.Root>,

src/components/ui/breadcrumb.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
-import { forwardRef, ComponentPropsWithoutRef, ReactNode, ComponentProps } from "react"
+import { ComponentProps, ComponentPropsWithoutRef, ReactNode, forwardRef } from "react"
 
 const Breadcrumb = forwardRef<
     HTMLElement,

src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import { Slot } from "@radix-ui/react-slot"
 import { type VariantProps, cva } from "class-variance-authority"
-import { forwardRef, ButtonHTMLAttributes } from "react"
+import { ButtonHTMLAttributes, forwardRef } from "react"
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

src/components/ui/calendar.tsx

@@ -1,7 +1,7 @@
 import { Button, buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
-import { ComponentProps, useRef, useEffect } from "react"
+import { ComponentProps, useEffect, useRef } from "react"
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 function Calendar({

src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { forwardRef, HTMLAttributes } from "react"
+import { HTMLAttributes, forwardRef } from "react"
 
 const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
@@ -30,12 +30,11 @@ const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingEle
 )
 CardTitle.displayName = "CardTitle"
 
-const CardDescription = forwardRef<
-    HTMLParagraphElement,
-    HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-))
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => (
+        <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+    ),
+)
 CardDescription.displayName = "CardDescription"
 
 const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(

src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Checkbox = forwardRef<
     ComponentRef<typeof CheckboxPrimitive.Root>,

src/components/ui/combobox.tsx

@@ -12,7 +12,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"
-import { forwardRef, ButtonHTMLAttributes, useState } from "react"
+import { ButtonHTMLAttributes, forwardRef, useState } from "react"
 
 interface ComboboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     options: {

src/components/ui/command.tsx

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes, forwardRef } from "react"
 
 const Command = forwardRef<
     ComponentRef<typeof CommandPrimitive>,

src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes, forwardRef } from "react"
 
 const Dialog = DialogPrimitive.Root
 

src/components/ui/drawer.tsx

@@ -1,5 +1,11 @@
 import { cn } from "@/lib/utils"
-import { ComponentProps, forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
+import {
+    ComponentProps,
+    ComponentPropsWithoutRef,
+    ComponentRef,
+    HTMLAttributes,
+    forwardRef,
+} from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
 const Drawer = ({

src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes, forwardRef } from "react"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 

src/components/ui/form.tsx

@@ -2,7 +2,15 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
-import { createContext, useContext, forwardRef, HTMLAttributes, useId, ComponentRef, ComponentPropsWithoutRef } from "react"
+import {
+    ComponentPropsWithoutRef,
+    ComponentRef,
+    HTMLAttributes,
+    createContext,
+    forwardRef,
+    useContext,
+    useId,
+} from "react"
 import {
     Controller,
     ControllerProps,
@@ -95,65 +103,62 @@ const FormLabel = forwardRef<
 })
 FormLabel.displayName = "FormLabel"
 
-const FormControl = forwardRef<
-    ComponentRef<typeof Slot>,
-    ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const FormControl = forwardRef<ComponentRef<typeof Slot>, ComponentPropsWithoutRef<typeof Slot>>(
+    ({ ...props }, ref) => {
+        const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
-    return (
-        <Slot
-            ref={ref}
-            id={formItemId}
-            aria-describedby={
-                !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-            }
-            aria-invalid={!!error}
-            {...props}
-        />
-    )
-})
+        return (
+            <Slot
+                ref={ref}
+                id={formItemId}
+                aria-describedby={
+                    !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+                }
+                aria-invalid={!!error}
+                {...props}
+            />
+        )
+    },
+)
 FormControl.displayName = "FormControl"
 
-const FormDescription = forwardRef<
-    HTMLParagraphElement,
-    HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField()
+const FormDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => {
+        const { formDescriptionId } = useFormField()
 
-    return (
-        <p
-            ref={ref}
-            id={formDescriptionId}
-            className={cn("text-sm text-muted-foreground", className)}
-            {...props}
-        />
-    )
-})
+        return (
+            <p
+                ref={ref}
+                id={formDescriptionId}
+                className={cn("text-sm text-muted-foreground", className)}
+                {...props}
+            />
+        )
+    },
+)
 FormDescription.displayName = "FormDescription"
 
-const FormMessage = forwardRef<
-    HTMLParagraphElement,
-    HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
-    const body = error ? String(error?.message) : children
+const FormMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, children, ...props }, ref) => {
+        const { error, formMessageId } = useFormField()
+        const body = error ? String(error?.message) : children
 
-    if (!body) {
-        return null
-    }
+        if (!body) {
+            return null
+        }
 
-    return (
-        <p
-            ref={ref}
-            id={formMessageId}
-            className={cn("text-sm font-medium text-destructive", className)}
-            {...props}
-        >
-            {body}
-        </p>
-    )
-})
+        return (
+            <p
+                ref={ref}
+                id={formMessageId}
+                className={cn("text-sm font-medium text-destructive", className)}
+                {...props}
+            >
+                {body}
+            </p>
+        )
+    },
+)
 FormMessage.displayName = "FormMessage"
 
 export {

src/components/ui/input.tsx

@@ -1,23 +1,21 @@
 import { cn } from "@/lib/utils"
-import { forwardRef, InputHTMLAttributes } from "react"
+import { InputHTMLAttributes, forwardRef } from "react"
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-    ({ className, type, ...props }, ref) => {
-        return (
-            <input
-                type={type}
-                className={cn(
-                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                    className,
-                )}
-                ref={ref}
-                {...props}
-            />
-        )
-    },
-)
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+    return (
+        <input
+            type={type}
+            className={cn(
+                "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                className,
+            )}
+            ref={ref}
+            {...props}
+        />
+    )
+})
 Input.displayName = "Input"
 
 export { Input }

src/components/ui/label.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { type VariantProps, cva } from "class-variance-authority"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const labelVariants = cva(
     "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",

src/components/ui/navigation-menu.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const NavigationMenu = forwardRef<
     ComponentRef<typeof NavigationMenuPrimitive.Root>,

src/components/ui/pagination.tsx

@@ -45,10 +45,7 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
 )
 PaginationLink.displayName = "PaginationLink"
 
-const PaginationPrevious = ({
-    className,
-    ...props
-}: ComponentProps<typeof PaginationLink>) => (
+const PaginationPrevious = ({ className, ...props }: ComponentProps<typeof PaginationLink>) => (
     <PaginationLink
         aria-label="Go to previous page"
         size="default"

src/components/ui/popover.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Popover = PopoverPrimitive.Root
 

src/components/ui/scroll-area.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const ScrollArea = forwardRef<
     ComponentRef<typeof ScrollAreaPrimitive.Root>,

src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Select = SelectPrimitive.Root
 

src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Separator = forwardRef<
     ComponentRef<typeof SeparatorPrimitive.Root>,

src/components/ui/switch.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Switch = forwardRef<
     ComponentRef<typeof SwitchPrimitives.Root>,

src/components/ui/table.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { forwardRef, HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from "react"
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, forwardRef } from "react"
 
 const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
     ({ className, ...props }, ref) => (
@@ -14,32 +14,29 @@ const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
 )
 Table.displayName = "Table"
 
-const TableHeader = forwardRef<
-    HTMLTableSectionElement,
-    HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
+const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+    ({ className, ...props }, ref) => (
+        <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+    ),
+)
 TableHeader.displayName = "TableHeader"
 
-const TableBody = forwardRef<
-    HTMLTableSectionElement,
-    HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-))
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+    ({ className, ...props }, ref) => (
+        <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+    ),
+)
 TableBody.displayName = "TableBody"
 
-const TableFooter = forwardRef<
-    HTMLTableSectionElement,
-    HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tfoot
-        ref={ref}
-        className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-        {...props}
-    />
-))
+const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+    ({ className, ...props }, ref) => (
+        <tfoot
+            ref={ref}
+            className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+            {...props}
+        />
+    ),
+)
 TableFooter.displayName = "TableFooter"
 
 const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
@@ -56,39 +53,40 @@ const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElem
 )
 TableRow.displayName = "TableRow"
 
-const TableHead = forwardRef<
-    HTMLTableCellElement,
-    ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <th
-        ref={ref}
-        className={cn(
-            "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-            className,
-        )}
-        {...props}
-    />
-))
+const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
+    ({ className, ...props }, ref) => (
+        <th
+            ref={ref}
+            className={cn(
+                "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+                className,
+            )}
+            {...props}
+        />
+    ),
+)
 TableHead.displayName = "TableHead"
 
-const TableCell = forwardRef<
-    HTMLTableCellElement,
-    TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <td
-        ref={ref}
-        className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-        {...props}
-    />
-))
+const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
+    ({ className, ...props }, ref) => (
+        <td
+            ref={ref}
+            className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+            {...props}
+        />
+    ),
+)
 TableCell.displayName = "TableCell"
 
-const TableCaption = forwardRef<
-    HTMLTableCaptionElement,
-    HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-))
+const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(
+    ({ className, ...props }, ref) => (
+        <caption
+            ref={ref}
+            className={cn("mt-4 text-sm text-muted-foreground", className)}
+            {...props}
+        />
+    ),
+)
 TableCaption.displayName = "TableCaption"
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

src/components/ui/tabs.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react"
 
 const Tabs = TabsPrimitive.Root
 

src/components/ui/textarea.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils"
-import { forwardRef, ComponentProps } from "react"
+import { ComponentProps, forwardRef } from "react"
 
 const Textarea = forwardRef<HTMLTextAreaElement, ComponentProps<"textarea">>(
     ({ className, ...props }, ref) => {