diff --git a/src/contexts/types/user.ts b/src/contexts/types/user.ts
index 7834377c8a363e4eddba034d7496671fc3327c5d..b7591e16291d53dbb0c2da899cf54cea212c925b 100644
--- a/src/contexts/types/user.ts
+++ b/src/contexts/types/user.ts
@@ -1,53 +1,53 @@
export interface IUserProfile {
- role: string;
- email: string;
- school: string[];
- company: string;
- country: string[];
- quote: string;
- socialLinks: {
- facebook: string;
- instagram: string;
- linkedin: string;
- twitter: string;
- };
- }
-
- export type IUserProfileCover = {
- name: string;
- role: string;
- coverUrl: string;
- avatarUrl: string;
+ role: string;
+ email: string;
+ school: string[];
+ company: string;
+ country: string[];
+ quote: string;
+ socialLinks: {
+ facebook: string;
+ instagram: string;
+ linkedin: string;
+ twitter: string;
};
-
- export interface IUserProfileExperience {
- id: string;
- jobTitle: string;
- company: string;
- period: string;
- description: string; // Remplace tasks par description
- contractType: 'freelance' | 'CDI' | 'CDD' | 'stage'; // Nouveau champ
- }
-
- export interface IUserProfileNft {
- nftBadges: {
- logo: string;
- title: string;
- company: string;
- date: string;
- }[];
- }
- export interface ITestItem {
- id: string;
- name: string;
- company: string;
- score: number;
- date: string;
- }
- export interface Offer {
- id: string;
+}
+
+export type IUserProfileCover = {
+ name: string;
+ role: string;
+ coverUrl: string;
+ avatarUrl: string;
+};
+
+export interface IUserProfileExperience {
+ id: string;
+ jobTitle: string;
+ company: string;
+ period: string;
+ description: string; // Remplace tasks par description
+ contractType: 'freelance' | 'CDI' | 'CDD' | 'stage'; // Nouveau champ
+}
+
+export interface IUserProfileNft {
+ nftBadges: {
+ logo: string;
+ title: string;
company: string;
- jobTitle: string;
- description: string;
- }
-
\ No newline at end of file
+ date: string;
+ }[];
+}
+export interface ITestItem {
+ id: string;
+ name: string;
+ company: string;
+ score: number;
+ date: string;
+}
+export interface Offer {
+ date: string | number | Date;
+ id: string;
+ company: string;
+ jobTitle: string;
+ description: string;
+}
diff --git a/src/shared/sections/user/Liste-test.tsx b/src/shared/sections/user/Liste-test.tsx
index 98787d10c742524fd49dfae7409cffb8f6e177c5..19eebe73e201dd1b1319f76eaf99938460c7fb7d 100644
--- a/src/shared/sections/user/Liste-test.tsx
+++ b/src/shared/sections/user/Liste-test.tsx
@@ -1,21 +1,30 @@
import type { ITestItem } from 'src/contexts/types/user';
-import React from 'react';
import { format } from 'date-fns';
+import React, { useState } from 'react';
import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
type Props = {
tests: ITestItem[];
};
export function ListeTest({ tests }: Props) {
+ const [searchText, setSearchText] = useState('');
+
+ const filteredTests = tests.filter((test) =>
+ test.name.toLowerCase().includes(searchText.toLowerCase())
+ );
+
return (
<Box
sx={{
p: 3,
- bgcolor: 'background.default',
+ bgcolor: 'background.default', // Utilisez une couleur de fond sombre
borderRadius: 1,
boxShadow: 1,
display: 'flex',
@@ -23,30 +32,58 @@ export function ListeTest({ tests }: Props) {
alignItems: 'center',
}}
>
- <Typography variant="h4" gutterBottom>
+ <Typography variant="h4" gutterBottom color="text.primary">
Liste des Tests
</Typography>
+
+ <Box
+ sx={{
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ mb: 2,
+ }}
+ >
+ <TextField
+ label="Rechercher un test"
+ variant="outlined"
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ sx={{ width: '75%', bgcolor: 'background.paper' }}
+ InputProps={{
+ style: { color: 'text.primary' },
+ }}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setSearchText('')}
+ sx={{ ml: 2 }}
+ >
+ Rechercher
+ </Button>
+ </Box>
- {tests.length === 0 ? (
- <Typography variant="body1">Aucun test disponible.</Typography>
+ {filteredTests.length === 0 ? (
+ <Typography variant="body1" color="text.secondary">Aucun test disponible.</Typography>
) : (
<Box
sx={{
width: '100%',
mt: 2,
- bgcolor: 'grey.100', // Couleur de fond des cartes de test
+ bgcolor: 'background.paper', // Arrière-plan pour les éléments individuels
borderRadius: 1,
boxShadow: 1,
p: 2,
}}
>
- {tests.map((test) => (
+ {filteredTests.map((test) => (
<Box
key={test.id}
sx={{
mb: 2,
p: 2,
- bgcolor: 'grey.200', // Couleur de fond des éléments individuels
+ bgcolor: 'background.default', // Couleur de fond des éléments individuels
borderRadius: 1,
boxShadow: 1,
display: 'flex',
@@ -54,16 +91,18 @@ export function ListeTest({ tests }: Props) {
alignItems: 'flex-start',
}}
>
- <Typography variant="h6">{test.name}</Typography>
- <Typography variant="body2" color="textSecondary">
- Société : {test.company}
- </Typography>
- <Typography variant="body2" color="textSecondary">
- Score : {test.score}
- </Typography>
- <Typography variant="body2" color="textSecondary">
- Date : {format(new Date(test.date), 'dd MMM yyyy')}
- </Typography>
+ <CardContent>
+ <Typography variant="h6" color="text.primary">{test.name}</Typography>
+ <Typography variant="body2" color="text.secondary">
+ Société : {test.company}
+ </Typography>
+ <Typography variant="body2" color="text.secondary">
+ Score : {test.score}
+ </Typography>
+ <Typography variant="body2" color="text.secondary">
+ Date : {format(new Date(test.date), 'dd MMM yyyy')}
+ </Typography>
+ </CardContent>
</Box>
))}
</Box>
diff --git a/src/shared/sections/user/liste-offre-postule.tsx b/src/shared/sections/user/liste-offre-postule.tsx
index db9d35b3e16fb678e6c81f566fab971f8fe6de2e..42bab0098a4076f0e8a395b47114f9cb55cf32e4 100644
--- a/src/shared/sections/user/liste-offre-postule.tsx
+++ b/src/shared/sections/user/liste-offre-postule.tsx
@@ -1,8 +1,11 @@
import type { Offer } from 'src/contexts/types/user';
-import React from 'react';
+import React, { useState } from 'react';
import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
type Props = {
@@ -10,11 +13,30 @@ type Props = {
};
export function ListeOffrePos({ offers }: Props) {
+ const [searchText, setSearchText] = useState('');
+ const [searchCriteria, setSearchCriteria] = useState('jobTitle');
+
+ const filteredOffers = offers.filter((offer) => {
+ if (searchCriteria === 'jobTitle') {
+ return offer.jobTitle.toLowerCase().includes(searchText.toLowerCase());
+ }
+
+ if (searchCriteria === 'company') {
+ return offer.company.toLowerCase().includes(searchText.toLowerCase());
+ }
+
+ if (searchCriteria === 'date') {
+ return new Date(offer.date).toLocaleDateString().includes(searchText);
+ }
+
+ return false;
+ });
+
return (
<Box
sx={{
p: 3,
- bgcolor: 'background.paper',
+ bgcolor: 'background.default', // Changer en 'background.default' pour le mode sombre
borderRadius: 1,
boxShadow: 1,
display: 'flex',
@@ -22,30 +44,74 @@ export function ListeOffrePos({ offers }: Props) {
alignItems: 'center',
}}
>
- <Typography variant="h4" gutterBottom>
+ <Typography variant="h4" gutterBottom color="text.primary">
Liste des Offres Postulées
</Typography>
+
+ <Box
+ sx={{
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ mb: 2,
+ }}
+ >
+ <TextField
+ select
+ label="Critère de recherche"
+ value={searchCriteria}
+ onChange={(e) => setSearchCriteria(e.target.value)}
+ sx={{ width: '30%', bgcolor: 'background.paper' }}
+ InputProps={{
+ style: { color: 'text.primary' },
+ }}
+ >
+ <MenuItem value="jobTitle">Poste</MenuItem>
+ <MenuItem value="company">Entreprise</MenuItem>
+ <MenuItem value="date">Date</MenuItem>
+ </TextField>
+
+ <TextField
+ label={`Rechercher par ${searchCriteria === 'jobTitle' ? 'poste' : searchCriteria === 'company' ? 'entreprise' : 'date'}`}
+ variant="outlined"
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ sx={{ width: '65%', bgcolor: 'background.paper' }}
+ InputProps={{
+ style: { color: 'text.primary' },
+ }}
+ />
+
+ <Button
+ variant="contained"
+ onClick={() => setSearchText('')}
+ sx={{ ml: 2 }}
+ >
+ Rechercher
+ </Button>
+ </Box>
- {offers.length === 0 ? (
- <Typography variant="body1">Aucune offre postulée disponible.</Typography>
+ {filteredOffers.length === 0 ? (
+ <Typography variant="body1" color="text.secondary">Aucune offre postulée disponible.</Typography>
) : (
<Box
sx={{
width: '100%',
mt: 2,
- bgcolor: 'grey.100', // Couleur de fond des cartes d'offres
+ bgcolor: 'background.paper', // Utiliser une couleur sombre pour le fond des éléments
borderRadius: 1,
boxShadow: 1,
p: 2,
}}
>
- {offers.map((offer) => (
+ {filteredOffers.map((offer) => (
<Box
key={offer.id}
sx={{
mb: 2,
p: 2,
- bgcolor: 'grey.200', // Couleur de fond des éléments individuels
+ bgcolor: 'background.default', // Couleur de fond des éléments individuels
borderRadius: 1,
boxShadow: 1,
display: 'flex',
@@ -53,13 +119,16 @@ export function ListeOffrePos({ offers }: Props) {
alignItems: 'flex-start',
}}
>
- <Typography variant="h6">{offer.jobTitle}</Typography>
- <Typography variant="body2" color="textSecondary">
+ <Typography variant="h6" color="text.primary">{offer.jobTitle}</Typography>
+ <Typography variant="body2" color="text.secondary">
Société : {offer.company}
</Typography>
- <Typography variant="body2" color="textSecondary">
+ <Typography variant="body2" color="text.secondary">
Description : {offer.description}
</Typography>
+ <Typography variant="body2" color="text.secondary">
+ Date : {new Date(offer.date).toLocaleDateString()}
+ </Typography>
</Box>
))}
</Box>
diff --git a/src/shared/sections/user/view/liste-badge-nft.tsx b/src/shared/sections/user/view/liste-badge-nft.tsx
index 8eab8f1c4aed14cedc3c419866202c08a2927084..01c98d81e712b7e35f682d25f597cd008d67c73c 100644
--- a/src/shared/sections/user/view/liste-badge-nft.tsx
+++ b/src/shared/sections/user/view/liste-badge-nft.tsx
@@ -1,75 +1,14 @@
+import type { Nft } from 'src/types/nft';
+
import React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
-import NftCard from '../nft-card';
-
-interface Attribute {
- trait_type: string;
- value: string;
-}
-
-interface Nft {
- name: string;
- description: string;
- image: string;
- attributes: Attribute[];
-}
+import { _nfts, _nftsValidity } from 'src/shared/_mock/_nfts';
-const nftDataArray: Nft[] = [
- {
- name: "Quiz Certificate NFT",
- description: "Certificate for completing the quiz",
- image: "ipfs://QmS32zryq8SrTkRnKCAGvsoA6NEeQxU9R5dnsweYnYtX9e",
- attributes: [
- {
- trait_type: "Name",
- value: "Souhail El Mahdani"
- },
- {
- trait_type: "Quiz",
- value: "Blockchain"
- },
- {
- trait_type: "Score",
- value: "99/100"
- },
- {
- trait_type: "Date",
- value: "09/07/2024"
- },
- ]
- },
- {
- name: "Quiz Certificate NFT",
- description: "Certificate for completing the quiz",
- image: "ipfs://QmS32zryq8SrTkRnKCAGvsoA6NEeQxU9R5dnsweYnYtX9e",
- attributes: [
- {
- trait_type: "Name",
- value: "Souhail El Mahdani"
- },
- {
- trait_type: "Quiz",
- value: "Blockchain"
- },
- {
- trait_type: "Score",
- value: "99/100"
- },
- {
- trait_type: "Date",
- value: "09/07/2024"
- },
- {
- trait_type: "Expiry Date",
- value: "12/12/2025"
- }
- ]
- }
-];
+import NftDetails from 'src/shared/sections/nft-cards/nft-card';
export function ListeBadge() {
return (
@@ -92,10 +31,12 @@ export function ListeBadge() {
</Typography>
<Grid container spacing={3} mt={2}>
- {nftDataArray.map((nft, index) => (
- <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
- <NftCard nft={nft} />
- </Grid>
+ { _nfts.map((nft: Nft, index: number) => (
+ _nftsValidity[index] && (
+ <Grid item xs={12} sm={12} md={6} lg={4} key={nft.tokenId}>
+ <NftDetails nft={nft} />
+ </Grid>
+ )
))}
</Grid>
</Box>