Lucasbentoskl/eng 238 feature profile page

apps/web-mobile/src/components/ui/input.tsx

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

apps/web-mobile/src/components/ui/radioBox.tsx

@@ -0,0 +1,42 @@
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+
+type cssmapType = {
+  [id: string]: string;
+};
+const cssmap: cssmapType = {
+  'option-hodler': 'option-hodler',
+  'option-recycler': 'option-recycler',
+  'option-waste': 'option-waste',
+};
+interface Props {
+  beforeText?: string;
+  id: string;
+  name: string;
+}
+export const RadioBox = ({ beforeText, id, name }: Props) => {
+  return (
+    <>
+      <FormItem key={`${id}-box`}>
+        <FormLabel className="[&:has([data-state=checked])>div]:border-primary [&:has([data-state=checked])>div>.checked-box-symbol]:block">
+          <FormControl>
+            <RadioGroupItem value={id} className="sr-only" />
+          </FormControl>
+          <Card className="hover:border-primary [&:has([data-state=checked])]:border-primary relative flex h-28 cursor-pointer flex-col justify-center border-2 p-4 transition-colors duration-200 ease-in-out">
+            <div className="p0">
+              {/* <Icon icon={role.icon} className="text-primary mx-auto h-12 w-12" /> */}
+              {beforeText && <span className="">{beforeText}</span>}
+              <CardTitle className="mt-px pr-6 text-left text-base font-bold">{name}</CardTitle>
+            </div>
+            <span className="checked-box-symbol absolute right-6 top-6 hidden h-5 w-5 rounded-full bg-blue-500 text-center text-sm text-white [&:has([data-state=checked])]:block">
+              &#x2713;
+            </span>
+          </Card>
+        </FormLabel>
+      </FormItem>
+    </>
+  );
+};

apps/web-mobile/src/layouts/header/menu/index.tsx

@@ -42,8 +42,6 @@ export function Menu() {
         const isAuditsRoute = item.route === ROUTES.PRIVATE.AUDITS();
         const isUnauthorized = !hasAuditorRole && !hasAdminPrivileges;
 
-        console.log('user', user);
-
         if (isAuditsRoute && isUnauthorized) return null;
 
         return (

apps/web-mobile/src/modules/settings/components/profile/profile-form/index.tsx

@@ -12,6 +12,7 @@ import { Separator } from '@/components/ui/separator';
 import { toast } from '@/components/ui/use-toast';
 import { Turnstile } from '@marsidev/react-turnstile';
 import { useState } from 'react';
+import { RadioBox } from '@/components/ui/radioBox';
 import { useAuth } from '@/hooks/auth';
 
 const profileFormSchema = z.object({
@@ -33,10 +34,21 @@ const profileFormSchema = z.object({
     .max(30, {
       message: 'Username must not be longer than 30 characters.',
     }),
+  role: z.string().min(1, 'You must select a role to display.'),
 });
 
 type ProfileFormValues = z.infer<typeof profileFormSchema>;
 
+type cssmapType = {
+  [id: string]: string;
+};
+
+const cssmap: cssmapType = {
+  'option-hodler-box': 'option-hodler-box',
+  'option-recycler-box': 'option-recycler-box',
+  'option-waste-box': 'option-waste-box',
+};
+
 export default function ProfileForm() {
   const { user } = useAuth();
   const [turnstileToken, setTurnstileToken] = useState<string>();
@@ -47,7 +59,8 @@ export default function ProfileForm() {
     resolver: zodResolver(profileFormSchema),
   });
 
-  function onSubmit(data: ProfileFormValues) {
+  function onSubmit(data: any) {
+    console.log({ data });
     toast({
       description: (
         <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
@@ -60,22 +73,31 @@ export default function ProfileForm() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <div className="flex flex-col gap-2">
-          <h2 className="text-base">Basic Info</h2>
+          <h2 className="text-base font-bold uppercase">Basic Info:</h2>
           <Separator />
         </div>
 
         <div className="flex flex-col gap-4">
-          <div className="grid grid-cols-6 gap-3">
+          <div className="grid grid-cols-6 gap-3 max-md:grid-cols-2">
             <FormField
               control={form.control}
               name="preferred_name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Preferred Name</FormLabel>
+                  <FormLabel>
+                    Preferred Name
+                    <span className="text-base font-extrabold text-red-600"> *</span>
+                  </FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input
+                      {...field}
+                      className="empty:border-input border invalid:border-red-500 focus-visible:border-blue-500 focus-visible:ring-0 focus-visible:ring-offset-0 [&:not(:placeholder-shown)(:invalid)]:valid:border-green-500"
+                      placeholder=""
+                      type="text"
+                      minLength={2}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -87,9 +109,17 @@ export default function ProfileForm() {
               name="phone"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Phone number</FormLabel>
+                  <FormLabel>
+                    Phone number
+                    <span className="text-base font-extrabold text-red-600"> *</span>
+                  </FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input
+                      {...field}
+                      type="tel"
+                      className="empty:border-input border invalid:border-red-500 focus-visible:border-blue-500 focus-visible:ring-0 focus-visible:ring-offset-0 [&:not(:placeholder-shown)(:invalid)]:valid:border-green-500"
+                      placeholder=""
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -101,10 +131,15 @@ export default function ProfileForm() {
             control={form.control}
             name="email"
             render={({ field }) => (
-              <FormItem className="">
+              <FormItem className="max-w-xs max-md:max-w-full">
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input
+                    {...field}
+                    type="email"
+                    className="border invalid:border-red-500 focus-visible:border-blue-500 focus-visible:ring-0 focus-visible:ring-offset-0 [&:not(:placeholder-shown)(:invalid)]:valid:border-green-500"
+                    placeholder=""
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -114,7 +149,7 @@ export default function ProfileForm() {
           <Label>Foto</Label>
           <Avatar>
             <AvatarImage
-              className="ring-neutral h-12 w-12 rounded-full ring-[1px]"
+              className="ring-neutral w-12 rounded-full border-2 border-black ring-[1px]"
               src={user?.picture ?? ''}
               alt="User profile"
             />
@@ -123,26 +158,30 @@ export default function ProfileForm() {
         </div>
 
         <div className="flex flex-col gap-2">
-          <h2 className="text-base">Profile Type</h2>
+          <h2 className="text-base font-bold uppercase">Profile Type:</h2>
           <Separator />
         </div>
+        <FormField
+          control={form.control}
+          name="role"
+          render={({ field }) => (
+            <FormControl>
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value || ''}
+                className={`grid grid-cols-6`}
+              >
+                <RadioBox beforeText="I'M" id="partner" name="Partner" />
 
-        <RadioGroup defaultValue="option-one">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-hodler" id="option-hodler" />
-            <Label htmlFor="option-hodler">Hodler</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-recycler" id="option-recycler" />
-            <Label htmlFor="option-recycler">Recycler</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-waste" id="option-waste" />
-            <Label htmlFor="option-waste">Waste Generator</Label>
-          </div>
-        </RadioGroup>
+                <RadioBox beforeText="I'M" id="recycler" name="Sustainable treatment agent" />
+
+                <RadioBox beforeText="I'M" id="waste-generator" name="Waste Generator" />
+              </RadioGroup>
+            </FormControl>
+          )}
+        />
 
-        <Turnstile siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY} onSuccess={setTurnstileToken} />
+        {/* <Turnstile siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY} onSuccess={setTurnstileToken} /> */}
         <Button type="submit">Save Changes</Button>
       </form>
     </Form>

apps/web-mobile/src/modules/settings/screens/profile/index.tsx

@@ -4,8 +4,8 @@ import ProfileForm from '@/modules/settings/components/profile/profile-form';
 
 export default function SettingsMainScreen() {
   return (
-    <div className="container space-y-6">
-      <h3 className="text-lg font-medium">Profile settings</h3>
+    <div className="container my-10 space-y-6 rounded-md border py-8 shadow-xl">
+      <h3 className="mb-10 text-3xl font-bold">Profile settings</h3>
       <ProfileForm />
     </div>
   );