status añadido, cambios en el responsive al ver el producto

apps/web/app/dashboard/productos/[id]/page.tsx

@@ -40,34 +40,36 @@ export default async function SurveyResponsePage({
 
   return (
     // <PageContainer>
-      <main className='p-4 md:px-6 flex flex-col md:flex-row gap-4 md:relative'>
+      <main className='px-4 lg:px-6 flex flex-col md:flex-row gap-3 lg:gap-4 md:relative'>
         <img
-          className="border-2 object-cover w-full h-full aspect-square rounded-2xl"
+          className="border-2 object-cover w-full f-full min-h-[400px] md:h-[85vh] aspect-square rounded-2xl"
           src={`http://localhost:3000/${product.urlImg}`}
           alt=""
         />
-        <Card className="flex flex-col md:w-[500px] md:max-h-[90vh] md:overflow-auto md:sticky top-0 right-0">
-          <CardHeader>
+        <Card className="flex flex-col md:w-[400px] lg:w-[500px] min-h-[400px] md:h-[85vh] md:overflow-auto md:sticky top-0 right-0">
+          <CardHeader className='py-2 px-2 md:px-4 lg:px-6'>
             <CardTitle className="font-bold text-2xl">
               {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
             </CardTitle>
-            <p className='font-semibold'>$ {product.price}</p>
+            <p className='font-semibold'>$ {product.price} </p>
+            {product.status === 'AGOTADO' ? (
+              <p className="font-semibold text-lg text-red-900">AGOTADO</p>
+              ): ('')}
           </CardHeader>
-          <CardContent className="flex-grow flex justify-between flex-col gap-4">
-            <div>
-              <p className='font-semibold text-lg border-t border-b'> Descripción</p>
-              <p className='p-1'>{product.description}</p>
-              {/* <p className='p-1'>{lorem+lorem+lorem+lorem}</p> */}
-            </div>
+          <CardContent className="py-0 px-2 md:px-4 lg:px-6 flex-col justify-between flex-grow md:overflow-auto">
+              <div>
+                <p className='font-semibold text-lg border-t border-b'> Descripción</p>
+                <p className='p-1'>{product.description}</p>
+                {/* <p className='p-1'>{lorem+lorem+lorem+lorem}</p> */}
+              </div>
 
-            <div>
+            <div className='mt-2'>
               <p className='font-semibold text-lg border-t border-b'> Dirección</p>
-              <p>{product.address}</p>
+              <p className='p-1'>{product.address}</p>
             </div>
-
-            
           </CardContent>
-          <CardFooter className="">
+          
+          <CardFooter className="px-2 md:px-4 lg:px-6">
             <div>
               <p className='font-semibold text-lg border-t border-b mt-4'>Información del vendedor</p>
               <p>{product.fullname}</p>

apps/web/constants/status.ts

@@ -0,0 +1,5 @@
+export const STATUS = {
+  PUBLICADO:"Publicado",
+  AGOTADO:"Agotado",
+  BORRADOR:"Borrador",
+}

apps/web/feactures/inventory/components/inventory/create-product-form.tsx

@@ -9,11 +9,19 @@ import {
   FormLabel,
   FormMessage,
 } from '@repo/shadcn/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@repo/shadcn/select';
 import { Textarea } from '@repo/shadcn/textarea';
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useCreateUser } from "@/feactures/inventory/hooks/use-mutation";
 import { EditInventory, editInventory, formDataInput } from '@/feactures/inventory/schemas/inventory';
+import {STATUS} from '@/constants/status'
 
 interface CreateFormProps {
   onSuccess?: () => void;
@@ -34,9 +42,11 @@ export function CreateForm({
   const defaultformValues = {
     title: '',
     description: '',
+    address: '',
     price: '',
     stock: '',
-    urlImg: ''
+    urlImg: '',
+    status: ''
   }
 
   const form = useForm<formDataInput>({
@@ -100,6 +110,20 @@ export function CreateForm({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem className='col-span-2'>
+                <FormLabel>Dirección</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="description"
@@ -107,7 +131,6 @@ export function CreateForm({
               <FormItem className='col-span-2'>
                 <FormLabel>Descripción</FormLabel>
                 <FormControl>
-                  {/* <Input {...field} /> */}
                   <Textarea {...field} className="resize-none"/>
                 </FormControl>
                 <FormMessage />
@@ -122,13 +145,36 @@ export function CreateForm({
               <FormItem>
                 <FormLabel>Cantidad/Stock</FormLabel>
                 <FormControl>
-                  <Input  {...field}  />
+                  <Input {...field} type='number' />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormLabel>Estatus</FormLabel>
+                <Select onValueChange={(value) => field.onChange(value)}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Seleccione un estatus" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(STATUS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="urlImg"
@@ -136,7 +182,7 @@ export function CreateForm({
               <FormItem>
                 <FormLabel>Imagen</FormLabel>
                 <FormControl>
-                  <Input  {...field}/>
+                  <Input {...field}/>
                 </FormControl>
                 <FormMessage />
               </FormItem>

apps/web/feactures/inventory/components/inventory/product-tables/columns.tsx

@@ -22,6 +22,8 @@ export const columns: ColumnDef<InventoryTable>[] = [
   {
     accessorKey: "description",
     header: "Descripcion",
+    cell: ({ row }) => row.original.description.length > 40 ?
+      `${row.original.description.slice(0, 40)}...` : row.original.description
   },
   {
     accessorKey: 'price',
@@ -32,7 +34,10 @@ export const columns: ColumnDef<InventoryTable>[] = [
     accessorKey: 'stock',
     header: 'Stock',
   },
-  
+  {
+    accessorKey: 'status',
+    header: 'Estado',
+  },
   {
     id: 'actions',
     header: 'Acciones',

apps/web/feactures/inventory/components/inventory/update-product-form.tsx

@@ -9,11 +9,19 @@ import {
   FormLabel,
   FormMessage,
 } from '@repo/shadcn/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@repo/shadcn/select';
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useUpdateUser } from "@/feactures/inventory/hooks/use-mutation";
 import { editInventory, formDataInput, EditInventory } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
 import { Textarea } from '@repo/shadcn/components/ui/textarea';
+import {STATUS} from '@/constants/status'
 
 interface UpdateFormProps {
   onSuccess?: () => void;
@@ -36,7 +44,9 @@ export function UpdateForm({
     id: defaultValues?.id, 
     title: defaultValues?.title || '',
     description: defaultValues?.description || '',
-    price: defaultValues?.price || '', 
+    price: defaultValues?.price || '',
+    address: defaultValues?.address || '',
+    status: defaultValues?.status || 'BORRADOR',
     stock: (defaultValues?.stock ?? '').toString(),
     urlImg: defaultValues?.urlImg || '',
     userId: defaultValues?.userId 
@@ -49,6 +59,7 @@ export function UpdateForm({
   });
 
   const onSubmit = async (data: formDataInput) => {
+    console.log(data);
     
     saveAccountingAccounts(data, {
       onSuccess: () => {
@@ -88,13 +99,11 @@ export function UpdateForm({
             )}
           />
 
-          
-
           <FormField
             control={form.control}
             name="price"
             render={({ field }) => (
-              <FormItem>
+              <FormItem >
                 <FormLabel>Precio</FormLabel>
                 <FormControl>
                   {/* Simplificado. price es z.string(), field.value ya es string o undefined. */}
@@ -105,6 +114,21 @@ export function UpdateForm({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem className='col-span-2'>
+                <FormLabel>Dirección</FormLabel>
+                <FormControl>
+                  {/* Simplificado. price es z.string(), field.value ya es string o undefined. */}
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="description"
@@ -112,7 +136,6 @@ export function UpdateForm({
               <FormItem className='col-span-2'>
                 <FormLabel>Descripción</FormLabel>
                 <FormControl>
-                  {/* <Input {...field} /> */}
                   <Textarea {...field} className="resize-none"/>
                 </FormControl>
                 <FormMessage />
@@ -127,7 +150,6 @@ export function UpdateForm({
               <FormItem>
                 <FormLabel>Cantidad/Stock</FormLabel>
                 <FormControl>
-                  {/* Añadido type="number" para UX. field.value ya es string debido a formDataInput */}
                   <Input {...field} type="number" />
                 </FormControl>
                 <FormMessage />
@@ -135,6 +157,29 @@ export function UpdateForm({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormLabel>Estatus</FormLabel>
+                <Select value={field.value} onValueChange={(value) => field.onChange(value)}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Seleccione un estatus" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(STATUS).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="urlImg"

apps/web/feactures/inventory/components/products/product-list.tsx

@@ -42,12 +42,15 @@ export function ProductList() {
             </CardHeader>
             <CardContent className="p-0 flex-grow">
               <img
-                className="object-cover w-full h-full aspect-square"
+                className="object-cover w-full h-full aspect-square border"
                 src={`http://localhost:3000/${data.urlImg}`}
                 alt=""
               />
             </CardContent>
-            <CardFooter className="flex justify-between items-center p-4">
+            <CardFooter className="flex-col items-start p-4">
+              {data.status === 'AGOTADO' ? (
+              <p className="font-semibold text-lg text-red-900">AGOTADO</p>
+              ): ('')}
               <p className="font-semibold text-lg">$ {data.price}</p>
             </CardFooter>
           </Card>

apps/web/feactures/inventory/schemas/inventory.ts

@@ -17,6 +17,7 @@ export const product = z.object({
   stock: z.number(),
   price: z.string(),
   urlImg: z.string(),
+  status: z.string(),
   userId: z.number().optional()
 })
 
@@ -32,9 +33,11 @@ export const editInventory = z.object({
   description: z.string().min(10, { message: "Debe de tener 10 o más caracteres" }),
   stock: z.string().transform(val => Number(val)).pipe(z.number(
     { invalid_type_error: 'El stock debe ser un número' }).min(0, { message: "El stock debe ser mayor a 0" })
-),
+  ),
+  address: z.string().min(5, { message: "Debe de tener 5 o más caracteres" }),
   price: z.string(),
   urlImg: z.string(),
+  status: z.string().min(1, { message: "Debe de seleccionar un valor" }),
   userId: z.number().optional(),
 })