fix: closes #10

app/components/data-table.tsx

@@ -51,9 +51,9 @@ export function DataTable<TData extends BaseRecord, TValue>({
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+              {headerGroup.headers.map((header, index) => {
                 return (
-                  <TableHead key={header.id} style={{ width: header.getSize() }}>
+                  <TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -68,14 +68,14 @@ export function DataTable<TData extends BaseRecord, TValue>({
         </TableHeader>
         <TableBody>
           {rows.length ? (
-            rows.map((row) => (
+            rows.map((row, index) => (
               <TableRow
-                key={row.id}
+                key={`FileDataTableRow_${index}`}
                 data-state={row.getIsSelected() && "selected"}
                 className="group"
               >
-                {row.getVisibleCells().map((cell) => (
+                {row.getVisibleCells().map((cell, index) => (
-                  <TableCell key={cell.id}>
+                  <TableCell key={`FileDataTableCell_${index}`}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}

app/components/forms.tsx

@@ -1,6 +1,6 @@
 import { Label } from "@radix-ui/react-label"
 import { Input } from "./ui/input"
-import { FieldName, useInputControl } from "@conform-to/react"
+import { type FieldName, useInputControl } from "@conform-to/react"
 import { useId } from "react"
 import { cn } from "~/utils"
 import { Checkbox } from "~/components/ui/checkbox"

app/components/general-layout.tsx

@@ -108,7 +108,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
           </Button>
 
           <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger asChild>
               <Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
                 <Avatar className="bg-ring h-7 w-7 rounded-full" />
                 {`${identity?.firstName} ${identity?.lastName}`}

app/components/usage-chart.tsx

@@ -50,7 +50,7 @@ export const UsageChart = ({ label, dataset }: UsageChartProps) => {
           <AnimatedAxis
             orientation="bottom"
             hideTicks
-            tickTransform="translateX(50%)"
+            tickTransform="translate(50 0)"
             tickLabelProps={{ className: "text-sm" }}
           />
           <AnimatedAxis

app/routes/account.tsx

@@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import {
     Authenticated,
-    BaseKey,
+    type BaseKey,
     useGetIdentity,
     useUpdate,
     useUpdatePassword,
@@ -41,7 +41,7 @@ import { Input } from "~/components/ui/input";
 import { UsageCard } from "~/components/usage-card";
 
 import QRImg from "~/images/QR.png";
-import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
+import type {UpdatePasswordFormRequest} from "~/data/auth-provider";
 
 export default function MyAccount() {
   const { data: identity } = useGetIdentity<{ email: string }>();
@@ -85,7 +85,7 @@ export default function MyAccount() {
           <ManagementCard>
             <ManagementCardAvatar
               button={
-                <DialogTrigger className="absolute bottom-0 right-0 z-50">
+                <DialogTrigger asChild className="absolute bottom-0 right-0 z-50">
                   <Button
                     onClick={() => setModal({ ...openModal, changeAvatar: true })}
                     variant="outline"
@@ -102,7 +102,7 @@ export default function MyAccount() {
               {identity?.email}
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() => setModal({ ...openModal, changeEmail: true })}>
@@ -134,7 +134,7 @@ export default function MyAccount() {
               <PasswordDots className="mt-6" />
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -152,7 +152,7 @@ export default function MyAccount() {
               Improve security by enabling 2FA.
             </ManagementCardContent>
             <ManagementCardFooter>
-              <DialogTrigger>
+              <DialogTrigger asChild>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() =>
@@ -470,7 +470,7 @@ const ChangeAvatarForm = () => {
       {hasStarted ? (
         <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
           <CloudCheckIcon className="w-32 h-32" />
-          {isCompleted ? "Upload completed" : `0% completed`}
+          {isCompleted ? "Upload completed" : "0% completed"}
         </div>
       ) : null}