added contact info to clients list

3 files changed, 29 insertions, 4 deletions

diff --git a/css/manage/_client.scss b/css/manage/_client.scss
index 7908333..36ff66a 100644
--- a/css/manage/_client.scss
+++ b/css/manage/_client.scss
@@ -9,6 +9,7 @@
                 border-bottom: 1px solid var(--link-fg);
                 display: flex;
                 flex-direction: column;
+                gap: 1rem;
 
                 .header {
                     display: flex;
@@ -27,8 +28,19 @@
                 }
 
                 .details {
-                    width: 90%;
+                    margin: auto;
+                    width: 98%;
                     display: grid;
+                    grid-template-columns: 1fr 1fr 2fr;
+
+                    .contact-info, .client-address {
+                        display: flex;
+                        flex-direction: column;
+
+                        .title {
+                            font-weight: bold;
+                        }
+                    }
                 }
             }
         }
diff --git a/src/app/manage/client/list/address.rs b/src/app/manage/client/list/address.rs
index c57ac89..233de92 100644
--- a/src/app/manage/client/list/address.rs
+++ b/src/app/manage/client/list/address.rs
@@ -22,6 +22,7 @@ use crate::models::client;
 #[derive(Properties, PartialEq)]
 pub struct Props {
     pub address: client::Address,
+    pub title: String,
 }
 
 #[function_component(Address)]
@@ -29,7 +30,8 @@ pub fn address(props: &Props) -> Html {
 
     html! {
         <div class={"client-address"}>
-            {props.address.address_text.clone()}
+            <span class={"title"}>{props.title.clone()}</span>
+            <span>{props.address.address_text.clone()}</span>
         </div>
     }
 }
diff --git a/src/app/manage/client/list/list_item.rs b/src/app/manage/client/list/list_item.rs
index b2d9ca9..8b78ad7 100644
--- a/src/app/manage/client/list/list_item.rs
+++ b/src/app/manage/client/list/list_item.rs
@@ -36,14 +36,25 @@ pub fn list_item(props: &Props) -> Html {
             </div>
 
             <div class={"details"}>
-                <div class={"general-info"}>
+                <div class={"contact-info"}>
+                    <span class={"title"}>{"Contact Details:"}</span>
+                    <span>{"Name - "}{props.client.contact.contact_name.clone()}</span>
+                    <span>{"Phone - "}{props.client.contact.phone_number.clone()}</span>
+                    <span>{"E-Mail - "}{props.client.contact.email_address.clone()}</span>
+                    <span>{"Website - "}{props.client.contact.website.clone()}</span>
                 </div>
 
-                <address::Address address={props.client.billing_address.clone()} />
+                <address::Address title={"Billing Address:"} address={props.client.billing_address.clone()} />
 
                 <div class={"shipping-addresses-wrapper"}>
                 </div>
             </div>
+
+            <div class={"options"}>
+                <p>
+                    {"Options (To Be Added)"}
+                </p>
+            </div>
         </div>
     }
 }