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

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(),
 })