🎨 Format

Author: alejsdev

frontend/src/components/Admin/AddUser.tsx

@@ -169,7 +169,8 @@ const AddUser = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>
-                      Confirm Password <span className="text-destructive">*</span>
+                      Confirm Password{" "}
+                      <span className="text-destructive">*</span>
                     </FormLabel>
                     <FormControl>
                       <Input

frontend/src/components/Admin/DeleteUser.tsx

@@ -28,9 +28,7 @@ const DeleteUser = ({ id, onSuccess }: DeleteUserProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const queryClient = useQueryClient()
   const { showSuccessToast, showErrorToast } = useCustomToast()
-  const {
-    handleSubmit,
-  } = useForm()
+  const { handleSubmit } = useForm()
 
   const deleteUser = async (id: string) => {
     await UsersService.deleteUser({ userId: id })

frontend/src/components/Admin/EditUser.tsx

@@ -89,7 +89,7 @@ const EditUser = ({ user, onSuccess }: EditUserProps) => {
 
   const onSubmit = (data: FormData) => {
     // exclude confirm_password from submission data and remove password if empty
-    const { confirm_password, ...submitData } = data
+    const { confirm_password: _, ...submitData } = data
     if (!submitData.password) {
       delete submitData.password
     }
@@ -124,7 +124,12 @@ const EditUser = ({ user, onSuccess }: EditUserProps) => {
                       Email <span className="text-destructive">*</span>
                     </FormLabel>
                     <FormControl>
-                      <Input placeholder="Email" type="email" {...field} required />
+                      <Input
+                        placeholder="Email"
+                        type="email"
+                        {...field}
+                        required
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

frontend/src/components/Admin/columns.tsx

@@ -1,6 +1,8 @@
 import type { ColumnDef } from "@tanstack/react-table"
+
 import type { UserPublic } from "@/client"
 import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
 import { UserActionsMenu } from "./UserActionsMenu"
 
 export type UserTableData = UserPublic & {
@@ -16,7 +18,7 @@ export const columns: ColumnDef<UserTableData>[] = [
       return (
         <div className="flex items-center gap-2">
           <span
-            className={`font-medium ${!fullName ? "text-muted-foreground" : ""}`}
+            className={cn("font-medium", !fullName && "text-muted-foreground")}
           >
             {fullName || "N/A"}
           </span>
@@ -51,7 +53,10 @@ export const columns: ColumnDef<UserTableData>[] = [
     cell: ({ row }) => (
       <div className="flex items-center gap-2">
         <span
-          className={`size-2 rounded-full ${row.original.is_active ? "bg-green-500" : "bg-gray-400"}`}
+          className={cn(
+            "size-2 rounded-full",
+            row.original.is_active ? "bg-green-500" : "bg-gray-400",
+          )}
         />
         <span className={row.original.is_active ? "" : "text-muted-foreground"}>
           {row.original.is_active ? "Active" : "Inactive"}

frontend/src/components/Common/DataTable.tsx

@@ -57,9 +57,9 @@ export function DataTable<TData, TValue>({
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
                   </TableHead>
                 )
               })}
@@ -69,9 +69,7 @@ export function DataTable<TData, TValue>({
         <TableBody>
           {table.getRowModel().rows.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -103,7 +101,7 @@ export function DataTable<TData, TValue>({
               to{" "}
               {Math.min(
                 (table.getState().pagination.pageIndex + 1) *
-                table.getState().pagination.pageSize,
+                  table.getState().pagination.pageSize,
                 data.length,
               )}{" "}
               of{" "}

frontend/src/components/Items/AddItem.tsx

@@ -97,7 +97,12 @@ const AddItem = () => {
                       Title <span className="text-destructive">*</span>
                     </FormLabel>
                     <FormControl>
-                      <Input placeholder="Title" type="text" {...field} required />
+                      <Input
+                        placeholder="Title"
+                        type="text"
+                        {...field}
+                        required
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -125,10 +130,7 @@ const AddItem = () => {
                   Cancel
                 </Button>
               </DialogClose>
-              <LoadingButton
-                type="submit"
-                loading={mutation.isPending}
-              >
+              <LoadingButton type="submit" loading={mutation.isPending}>
                 Save
               </LoadingButton>
             </DialogFooter>

frontend/src/components/Items/DeleteItem.tsx

@@ -28,9 +28,7 @@ const DeleteItem = ({ id, onSuccess }: DeleteItemProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const queryClient = useQueryClient()
   const { showSuccessToast, showErrorToast } = useCustomToast()
-  const {
-    handleSubmit,
-  } = useForm()
+  const { handleSubmit } = useForm()
 
   const deleteItem = async (id: string) => {
     await ItemsService.deleteItem({ id: id })

frontend/src/components/Items/columns.tsx

@@ -1,8 +1,10 @@
 import type { ColumnDef } from "@tanstack/react-table"
 import { Check, Copy } from "lucide-react"
+
 import type { ItemPublic } from "@/client"
 import { Button } from "@/components/ui/button"
 import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
+import { cn } from "@/lib/utils"
 import { ItemActionsMenu } from "./ItemActionsMenu"
 
 function CopyId({ id }: { id: string }) {
@@ -49,7 +51,10 @@ export const columns: ColumnDef<ItemPublic>[] = [
       const description = row.original.description
       return (
         <span
-          className={`max-w-xs truncate block ${!description ? "text-muted-foreground italic" : "text-muted-foreground"}`}
+          className={cn(
+            "max-w-xs truncate block text-muted-foreground",
+            !description && "italic",
+          )}
         >
           {description || "No description"}
         </span>