Refactor code structure and remove redundant sections for improved readability and maintainability

app/auth/update-account/_components/update-account-form.tsx

@@ -8,8 +8,6 @@ import { ExternalLink } from '@/public/assets/external-link';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 
-import { onUpdateAccount } from '@kit/auth/actions/update-account-actions';
-import { UpdateAccountSchema } from '@kit/auth/schemas/update-account.schema';
 import { Button } from '@kit/ui/button';
 import { Checkbox } from '@kit/ui/checkbox';
 import {
@@ -23,6 +21,9 @@ import {
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
+import { UpdateAccountSchema } from '../_lib/schemas/update-account.schema';
+import { onUpdateAccount } from '../_lib/server/update-account';
+
 export function UpdateAccountForm({ user }: { user: User }) {
   const form = useForm({
     resolver: zodResolver(UpdateAccountSchema),
@@ -30,16 +31,15 @@ export function UpdateAccountForm({ user }: { user: User }) {
     defaultValues: {
       firstName: '',
       lastName: '',
-      personalCode: user.user_metadata.personalCode ?? '',
+      personalCode: '',
       email: user.email,
       phone: '',
       city: '',
-      weight: user.user_metadata.weight ?? undefined,
-      height: user.user_metadata.height ?? undefined,
+      weight: 0,
+      height: 0,
       userConsent: false,
     },
   });
-
   return (
     <Form {...form}>
       <form

app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx

@@ -42,7 +42,7 @@ const Level = ({
 
 export const AnalysisLevelBarSkeleton = () => {
   return (
-    <div className="mt-4 flex h-3 max-w-[360px] w-[35%] gap-1 sm:mt-0">
+    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
       <Level color="gray-200" />
     </div>
   );
@@ -58,7 +58,7 @@ const AnalysisLevelBar = ({
   level: AnalysisResultLevel;
 }) => {
   return (
-    <div className="mt-4 flex h-3 max-w-[360px] w-[35%] gap-1 sm:mt-0">
+    <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
       {normLowerIncluded && (
         <>
           <Level

app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx

@@ -1,16 +1,20 @@
 'use client';
 
 import React, { useState } from 'react';
-import { format } from 'date-fns';
 
+import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
+import { format } from 'date-fns';
 import { Info } from 'lucide-react';
 
+import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
-import AnalysisLevelBar, { AnalysisLevelBarSkeleton, AnalysisResultLevel } from './analysis-level-bar';
-import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
 import { AnalysisElement } from '~/lib/services/analysis-element.service';
-import { Trans } from '@kit/ui/trans';
+
+import AnalysisLevelBar, {
+  AnalysisLevelBarSkeleton,
+  AnalysisResultLevel,
+} from './analysis-level-bar';
 
 export enum AnalysisStatus {
   NORMAL = 0,
@@ -59,7 +63,7 @@ const Analysis = ({
   };
 
   return (
-    <div className="border-border items-center justify-between rounded-lg border px-5 py-3 sm:h-[65px] flex flex-col sm:flex-row px-12 gap-2 sm:gap-0">
+    <div className="border-border flex flex-col items-center justify-between gap-2 rounded-lg border px-5 px-12 py-3 sm:h-[65px] sm:flex-row sm:gap-0">
       <div className="flex items-center gap-2 font-semibold">
         {name}
         {results?.response_time && (
@@ -75,7 +79,9 @@ const Analysis = ({
                 { block: showTooltip },
               )}
             >
-              <Trans i18nKey="analysis-results:analysisDate" />{': '}{format(new Date(results.response_time), 'dd.MM.yyyy HH:mm')}
+              <Trans i18nKey="analysis-results:analysisDate" />
+              {': '}
+              {format(new Date(results.response_time), 'dd.MM.yyyy HH:mm')}
             </div>
           </div>
         )}
@@ -86,7 +92,7 @@ const Analysis = ({
             <div className="font-semibold">{value}</div>
             <div className="text-muted-foreground text-sm">{unit}</div>
           </div>
-          <div className="text-muted-foreground flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0 mx-8">
+          <div className="text-muted-foreground mx-8 flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0">
             {normLower} - {normUpper}
             <div>
               <Trans i18nKey="analysis-results:results.range.normal" />
@@ -105,7 +111,7 @@ const Analysis = ({
               <Trans i18nKey="analysis-results:waitingForResults" />
             </div>
           </div>
-          <div className="w-[60px] mx-8"></div>
+          <div className="mx-8 w-[60px]"></div>
           <AnalysisLevelBarSkeleton />
         </>
       )}

app/home/(user)/_components/dashboard.tsx

@@ -223,6 +223,7 @@ export default function Dashboard({ account }: { account: AccountWithParams }) {
             ) => {
               return (
                 <div className="flex justify-between" key={index}>
+                  <div className="mr-4 flex flex-row items-center gap-4">
                   <div className="mr-4 flex flex-row items-center gap-4">
                     <div
                       className={cn(

app/select-package/page.tsx

@@ -24,7 +24,8 @@ export const generateMetadata = async () => {
 };
 
 async function SelectPackagePage() {
-  const { analysisPackageElements, analysisPackages, countryCode } = await loadAnalysisPackages();
+  const { analysisPackageElements, analysisPackages, countryCode } =
+    await loadAnalysisPackages();
 
   return (
     <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
@@ -44,7 +45,10 @@ async function SelectPackagePage() {
           }
         />
       </div>
-      <SelectAnalysisPackages analysisPackages={analysisPackages} countryCode={countryCode} />
+      <SelectAnalysisPackages
+        analysisPackages={analysisPackages}
+        countryCode={countryCode}
+      />
       <div className="flex justify-center">
         <Link href={pathsConfig.app.home}>
           <Button variant="secondary" className="align-center">

next.config.mjs

@@ -1,4 +1,7 @@
 import withBundleAnalyzer from '@next/bundle-analyzer';
+import transpileModules from 'next-transpile-modules';
+
+const withTM = transpileModules(['lucide-react']);
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
@@ -25,7 +28,7 @@ const INTERNAL_PACKAGES = [
 ];
 
 /** @type {import('next').NextConfig} */
-const config = {
+const config = withTM({
   reactStrictMode: true,
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: INTERNAL_PACKAGES,
@@ -68,7 +71,7 @@ const config = {
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
-};
+});
 
 export default withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',

packages/features/auth/src/components/update-account-form.tsx

@@ -1,225 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import { User } from '@supabase/supabase-js';
-
-import { ExternalLink } from '@/public/assets/external-link';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-
-import { Button } from '@kit/ui/button';
-import { Checkbox } from '@kit/ui/checkbox';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@kit/ui/form';
-import { Input } from '@kit/ui/input';
-import { Trans } from '@kit/ui/trans';
-
-import { UpdateAccountSchema } from '../schemas/update-account.schema';
-import { onUpdateAccount } from '../server/actions/update-account-actions';
-
-export function UpdateAccountForm({ user }: { user: User }) {
-  const form = useForm({
-    resolver: zodResolver(UpdateAccountSchema),
-    mode: 'onChange',
-    defaultValues: {
-      firstName: '',
-      lastName: '',
-      personalCode: '',
-      email: user.email,
-      phone: '',
-      city: '',
-      weight: 0,
-      height: 0,
-      userConsent: false,
-    },
-  });
-  return (
-    <Form {...form}>
-      <form
-        className="flex flex-col gap-6 px-6 pt-10 text-left"
-        onSubmit={form.handleSubmit(onUpdateAccount)}
-      >
-        <FormField
-          name="firstName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:firstName'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="lastName"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:lastName'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="personalCode"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:personalCode'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:email'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} disabled />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="phone"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:phone'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="city"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <Trans i18nKey={'common:formField:city'} />
-              </FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <div className="flex flex-row justify-between gap-4">
-          <FormField
-            name="weight"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans i18nKey={'common:formField:weight'} />
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    type="number"
-                    placeholder="kg"
-                    {...field}
-                    value={field.value ?? ''}
-                    onChange={(e) =>
-                      field.onChange(
-                        e.target.value === '' ? null : Number(e.target.value),
-                      )
-                    }
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            name="height"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  <Trans i18nKey={'common:formField:height'} />
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder="cm"
-                    type="number"
-                    {...field}
-                    value={field.value ?? ''}
-                    onChange={(e) =>
-                      field.onChange(
-                        e.target.value === '' ? null : Number(e.target.value),
-                      )
-                    }
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-
-        <FormField
-          name="userConsent"
-          render={({ field }) => (
-            <FormItem>
-              <div className="flex flex-row items-center gap-2 pb-1">
-                <FormControl>
-                  <Checkbox
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
-                <FormLabel>
-                  <Trans i18nKey={'account:updateAccount:userConsentLabel'} />
-                </FormLabel>
-              </div>
-
-              <Link
-                href={''}
-                className="flex flex-row items-center gap-2 text-sm hover:underline"
-                target="_blank"
-              >
-                <ExternalLink />
-                <Trans i18nKey={'account:updateAccount:userConsentUrlTitle'} />
-              </Link>
-            </FormItem>
-          )}
-        />
-
-        <Button disabled={form.formState.isSubmitting} type="submit">
-          <Trans i18nKey={'account:updateAccount:button'} />
-        </Button>
-      </form>
-    </Form>
-  );
-}