next

package.json

@@ -10,16 +10,20 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@headlessui/react": "^1.4.2",
+    "@mui/material": "^5.15.17",
     "axios": "^0.21.1",
     "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.12.1",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-react": "^7.24.1",
     "@next/eslint-plugin-next": "^10.0.4",
     "@tailwindcss/forms": "^0.5.2",
     "autoprefixer": "^10.4.2",

src/app/(app)/Navigation.js

@@ -23,17 +23,17 @@ const Navigation = ({ user }) => {
                     <div className="flex">
                         {/* Logo */}
                         <div className="flex-shrink-0 flex items-center">
-                            <Link href="/dashboard">
+                            <Link href="/home">
                                 <ApplicationLogo className="block h-10 w-auto fill-current text-gray-600" />
                             </Link>
                         </div>
 
                         {/* Navigation Links */}
                         <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                             <NavLink
-                                href="/dashboard"
-                                active={usePathname() === '/dashboard'}>
-                                Dashboard
+                                href="/home"
+                                active={usePathname() === '/home'}>
+                                Home
                             </NavLink>
                         </div>
                     </div>
@@ -106,9 +106,9 @@ const Navigation = ({ user }) => {
                 <div className="block sm:hidden">
                     <div className="pt-2 pb-3 space-y-1">
                         <ResponsiveNavLink
-                            href="/dashboard"
-                            active={usePathname() === '/dashboard'}>
-                            Dashboard
+                            href="/home"
+                            active={usePathname() === '/home'}>
+                            Home
                         </ResponsiveNavLink>
                     </div>
 
@@ -154,4 +154,4 @@ const Navigation = ({ user }) => {
     )
 }
 
-export default Navigation
+export default Navigation

src/app/(app)/dashboard/page.js → src/app/(app)/home/page.js

@@ -1,4 +1,5 @@
 import Header from '@/app/(app)/Header'
+import CardList from '@/components/CardList'
 
 export const metadata = {
     title: 'Laravel - Dashboard',
@@ -7,12 +8,13 @@ export const metadata = {
 const Dashboard = () => {
     return (
         <>
-            <Header title="Dashboard" />
+            <Header title="Home" />
             <div className="py-12">
                 <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                     <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                         <div className="p-6 bg-white border-b border-gray-200">
                             You are logged in!
+                            <CardList />
                         </div>
                     </div>
                 </div>
@@ -21,4 +23,4 @@ const Dashboard = () => {
     )
 }
 
-export default Dashboard
+export default Dashboard

src/app/(auth)/forgot-password/page.js

@@ -11,7 +11,7 @@ import AuthSessionStatus from '@/app/(auth)/AuthSessionStatus'
 const Page = () => {
     const { forgotPassword } = useAuth({
         middleware: 'guest',
-        redirectIfAuthenticated: '/dashboard',
+        redirectIfAuthenticated: '/home',
     })
 
     const [email, setEmail] = useState('')

src/app/(auth)/login/page.js

@@ -15,7 +15,7 @@ const Login = () => {
 
     const { login } = useAuth({
         middleware: 'guest',
-        redirectIfAuthenticated: '/dashboard',
+        redirectIfAuthenticated: '/home',
     })
 
     const [email, setEmail] = useState('')
@@ -79,10 +79,7 @@ const Login = () => {
                         autoComplete="current-password"
                     />
 
-                    <InputError
-                        messages={errors.password}
-                        className="mt-2"
-                    />
+                    <InputError messages={errors.password} className="mt-2" />
                 </div>
 
                 {/* Remember Me */}

src/app/(auth)/register/page.js

@@ -11,7 +11,7 @@ import { useState } from 'react'
 const Page = () => {
     const { register } = useAuth({
         middleware: 'guest',
-        redirectIfAuthenticated: '/dashboard',
+        redirectIfAuthenticated: '/home',
     })
 
     const [name, setName] = useState('')
@@ -86,9 +86,7 @@ const Page = () => {
 
             {/* Confirm Password */}
             <div className="mt-4">
-                <Label htmlFor="passwordConfirmation">
-                    Confirm Password
-                </Label>
+                <Label htmlFor="passwordConfirmation">Confirm Password</Label>
 
                 <Input
                     id="passwordConfirmation"

src/app/(auth)/verify-email/page.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
 const Page = () => {
     const { logout, resendEmailVerification } = useAuth({
         middleware: 'auth',
-        redirectIfAuthenticated: '/dashboard',
+        redirectIfAuthenticated: '/home',
     })
 
     const [status, setStatus] = useState(null)
@@ -16,9 +16,9 @@ const Page = () => {
         <>
             <div className="mb-4 text-sm text-gray-600">
                 Thanks for signing up! Before getting started, could you verify
-                your email address by clicking on the link we just
-                emailed to you? If you didn't receive the email, we will gladly
-                send you another.
+                your email address by clicking on the link we just emailed to
+                you? If you didn't receive the email, we will gladly send you
+                another.
             </div>
 
             {status === 'verification-link-sent' && (

src/app/LoginLinks.js

@@ -10,24 +10,21 @@ const LoginLinks = () => {
         <div className="hidden fixed top-0 right-0 px-6 py-4 sm:block">
             {user ? (
                 <Link
-                    href="/dashboard"
-                    className="ml-4 text-sm text-gray-700 underline"
-                >
+                    href="/home"
+                    className="ml-4 text-sm text-gray-700 underline">
                     Dashboard
                 </Link>
             ) : (
                 <>
                     <Link
                         href="/login"
-                        className="text-sm text-gray-700 underline"
-                    >
+                        className="text-sm text-gray-700 underline">
                         Login
                     </Link>
 
                     <Link
                         href="/register"
-                        className="ml-4 text-sm text-gray-700 underline"
-                    >
+                        className="ml-4 text-sm text-gray-700 underline">
                         Register
                     </Link>
                 </>

src/components/CardList.js

@@ -0,0 +1,55 @@
+'use client'
+
+import axios from '@/lib/axios'
+import CardCommon from './cardCommon'
+import { useState, useEffect } from 'react'
+import { useAuth } from '@/hooks/auth'
+import { v4 as uuidv4 } from 'uuid'
+
+const CardList = () => {
+    const { user } = useAuth({ middleware: 'auth' })
+    const { code } = useAuth()
+    const [list, setList] = useState([])
+    const codeUnique = uuidv4()
+
+    useEffect(() => {
+        axios
+            .get('/api/list_offers')
+            .then(response => {
+                // Actualizar el estado con los datos de las ofertas recibidas
+                setList(response.data)
+            })
+            .catch(error => {
+                console.error('Error fetching offers:', error)
+            })
+    }, [])
+
+    const handleCode = () => {
+        list.forEach(offer => {
+            code({
+                code: codeUnique,
+                user_id: user.id,
+                offer_id: offer.id,
+                redeemed: false,
+            })
+        })
+    }
+    return (
+        <>
+            {list &&
+                list.map(offer => (
+                    <CardCommon
+                        key={offer.id}
+                        title={offer.name}
+                        discount={offer.discount}
+                        image={offer.image_url}
+                        description={offer.description}
+                        buttonText={'Obtener'}
+                        handlerClick={handleCode}
+                    />
+                ))}
+        </>
+    )
+}
+
+export default CardList

src/components/buttonCommon.js

@@ -0,0 +1,11 @@
+import { Button } from '@mui/material'
+
+const ButtonCommon = ({ title, handleClick, variant, href, ...props }) => {
+    return (
+        <Button onClick={handleClick} variant={variant} href={href} {...props}>
+            {title}
+        </Button>
+    )
+}
+
+export default ButtonCommon

src/components/cardCommon.js

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import { Box, CardActionArea, CardActions } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import ButtonCommon from './buttonCommon'
+
+const ButtonStyledLogin = styled(ButtonCommon)({
+    color: 'white',
+    backgroundColor: '#715aff',
+    '&:hover': {
+        backgroundColor: '#5830f7',
+    },
+})
+
+export default function CardCommon({
+    title,
+    image,
+    description,
+    discount,
+    buttonText,
+    handlerClick,
+}) {
+    return (
+        <Card sx={{ maxWidth: 345 }}>
+            <CardActionArea>
+                <div
+                    style={{
+                        height: 250,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}>
+                    <div style={{ width: 150, height: 150 }}>
+                        <CardMedia component="img" image={image} alt={title} />
+                    </div>
+                </div>
+                <CardContent>
+                    <Typography
+                        textAlign="center"
+                        gutterBottom
+                        variant="h5"
+                        component="div">
+                        {title}
+                    </Typography>
+                    <Typography textAlign="center" variant="h6" component="div">
+                        {'% ' + discount + ' DESCUENTO'}
+                    </Typography>
+                    <Typography
+                        textAlign="center"
+                        variant="body2"
+                        color="text.secondary">
+                        {description}
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+            <CardActions>
+                <Box width="100%" display="flex" justifyContent="center">
+                    <ButtonStyledLogin
+                        handleClick={handlerClick}
+                        style={{ width: 150, height: 40, marginBottom: 20 }}
+                        size="small"
+                        variant={'contained'}
+                        title={buttonText}
+                    />
+                </Box>
+            </CardActions>
+        </Card>
+    )
+}