diff --git a/assets/react/controllers/TransactionComponant.tsx b/assets/react/controllers/TransactionComponant.tsx
index ee0f8f1303d2a5929438bc80a43ee688e3ccead2..74c603965b19d721e078fd709c5ea6769f0a9fd6 100644
--- a/assets/react/controllers/TransactionComponant.tsx
+++ b/assets/react/controllers/TransactionComponant.tsx
@@ -10,19 +10,32 @@ export default function TransactionComponant(props: {
isEditing: boolean;
category: string;
}) {
- // if (props.isEditing == true)
return (
- <>
- <div>
- <span className="location">{props.location} </span>
- <span className="description">{props.description} </span>
- <span className="amount">{props.amount} </span>
- <span className="date">
- <imput type="date">{props.date}</imput>
- </span>
- <span className="category">{props.category} </span>
+ <section className="flex-column" id="container">
+ <div className="flex-row item" id="">
+ {props.isEditing ? (
+ <>
+ <div>lolilol</div>
+ </>
+ ) : (
+ <>
+ <div>{props.location}</div>
+ <div>{props.description}</div>
+ <div>{props.category} </div>
+ <div>{props.amount} </div>
+ <div>{props.date}</div>
+ <div>
+ <img src="img/263087.png" alt="peinceau" href="" />
+ </div>
+ <div>
+ <img src="img/download.png" alt="peinceau" href="" />
+ </div>
+ <div>
+ Revenue : <input type="checkbox" />
+ </div>
+ </>
+ )}
</div>
- </>
+ </section>
);
- // else return <></>;
}
diff --git a/assets/styles/transaction.css b/assets/styles/transaction.css
index 47fd717805bd8a6f07b8cbf86e5a9f6f263ce5dd..4cccaa1fa95946cf698623529922a3dec8f4d651 100644
--- a/assets/styles/transaction.css
+++ b/assets/styles/transaction.css
@@ -1,19 +1,64 @@
-.location {
- color: blue;
-}
-
-.description {
- color: red;
-}
-
-.amount {
- color: green;
-}
-
-.date {
- color: purple;
-}
-
-.category {
- color: orange;
-}
\ No newline at end of file
+ .flex-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ padding: 0 10px 0 10px;
+ margin-bottom: 2px;
+ text-decoration: none;
+ color: black;
+ flex-wrap: wrap;
+ }
+
+ .flex-row div {
+ flex: 1 1 0;
+ /* Replace 0 with 25% for 4/row */
+ text-align: center;
+ }
+
+ .flex-row :hover {
+ border: 2px solid var(--active-color);
+ /* cursor: pointer; */
+ }
+
+ .flex-column {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #container {
+ /* display: grid; */
+ /* align-items: center; */
+ /* justify-content: center; */
+ margin: 10px;
+ padding: 10px;
+ border: 3px solid;
+ border-color: black;
+ border-radius: 5px;
+ }
+
+ .location {
+ color: blue;
+ }
+
+ .description {
+ color: red;
+ }
+
+ .amount {
+ color: green;
+ }
+
+ .date {
+ color: purple;
+ }
+
+ .category {
+ color: orange;
+ }
+
+ img {
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+ }
\ No newline at end of file
diff --git a/public/img/263087.png b/public/img/263087.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f6d8020f0866eaa58655c3197cb18556f196929
Binary files /dev/null and b/public/img/263087.png differ
diff --git a/public/img/download.png b/public/img/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..61d19e78887338edb36e142e27d69172629c995c
Binary files /dev/null and b/public/img/download.png differ
diff --git a/templates/transaction/index.html.twig b/templates/transaction/index.html.twig
index e97030ddc14ba340dd2e704f3d82b4b5ea4d3076..018b6be39b3aa6dc06e21bbee86e4e849bab37f4 100644
--- a/templates/transaction/index.html.twig
+++ b/templates/transaction/index.html.twig
@@ -5,14 +5,10 @@
{% block javascripts %}
{{ parent() }}
-{# {{ encore_entry_script_tags('menu')}} #}
- {# {{ encore_entry_script_tags('transaction') }} #}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
-{# {{ encore_entry_link_tags('menu') }} #}
- {# {{ encore_entry_script_tags('transaction') }} #}
{% endblock %}
@@ -23,7 +19,7 @@
</div>
<div style="display: flex;justify-content: center;flex-direction: row;margin-left: 225px; ">
- <div style="display:flex; flex-direction:column;">
+ <div style="display:flex; flex-direction:column; flex-grow: 1">
<div {{ react_component( 'TransactionComponant', {location: "Decathlon", description: "Chaussure", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
<div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
<div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
@@ -31,7 +27,7 @@
<div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
<div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
<div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
- <div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div>
+ <div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:true, category : "sport"} ) }}></div>
</div>
{# <div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div> #}
{# <div {{ react_component( 'TransactionComponant', {location: "Metro", description: "les courses", amount:13, date: "12-12-12", isEditing:false, category : "sport"} ) }}></div> #}