Profile page improvements.

bodyshop_translations.babel

@@ -46627,6 +46627,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>changepassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>profileinfo</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>

client/src/components/profile-my/profile-my.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, notification } from "antd";
+import { Button, Card, Col, Form, Input, notification } from "antd";
 import { LockOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -48,14 +48,23 @@ export default connect(
   };
 
   return (
-    <div>
+    <>
+      <Col span={24}>
         <Form
           onFinish={handleFinish}
           autoComplete={"no"}
           initialValues={currentUser}
           layout="vertical"
         >
-        <LayoutFormRow>
+          <Card
+            title={t("user.labels.profileinfo")}
+            extra={
+              <Button type="primary" key="submit" htmlType="submit">
+                {t("user.actions.updateprofile")}
+              </Button>
+            }
+          >
+            <LayoutFormRow noDivider>
               <Form.Item
                 label={t("user.fields.displayname")}
                 rules={[
@@ -72,19 +81,29 @@ export default connect(
                 <Input />
               </Form.Item>
             </LayoutFormRow>
-
+          </Card>
-        <Button type="primary" key="submit" htmlType="submit">
-          {t("user.actions.updateprofile")}
-        </Button>
         </Form>
+      </Col>
+      <Col span={24}>
         <Form
           onFinish={handleChangePassword}
           autoComplete={"no"}
           initialValues={currentUser}
           layout="vertical"
+        >
+          <Card
+            title={t("user.labels.changepassword")}
+            extra={
+              <Button type="primary" key="submit" htmlType="submit">
+                {t("user.actions.changepassword")}
+              </Button>
+            }
           >
             <LayoutFormRow>
-          <Form.Item label={t("general.labels.newpassword")} name="password">
+              <Form.Item
+                label={t("general.labels.newpassword")}
+                name="password"
+              >
                 <Input
                   prefix={<LockOutlined />}
                   type="password"
@@ -119,10 +138,9 @@ export default connect(
                 />
               </Form.Item>
             </LayoutFormRow>
-        <Button type="primary" key="submit" htmlType="submit">
+          </Card>
-          {t("user.actions.changepassword")}
-        </Button>
         </Form>
-    </div>
+      </Col>
+    </>
   );
 });

client/src/components/profile-shops/profile-shops.component.jsx

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, Button, Typography } from "antd";
+import { Table, Button, Typography, Space, Input, Card, Col } from "antd";
 export default function ProfileShopsComponent({
   loading,
   data,
   updateActiveShop,
 }) {
   const { t } = useTranslation();
-
+  const [search, setSearch] = useState("");
   const columns = [
     {
       title: t("associations.fields.shopname"),
@@ -39,18 +39,39 @@ export default function ProfileShopsComponent({
       ),
     },
   ];
+  console.log("🚀 ~ file: profile-shops.component.jsx:45 ~ data", data);
+  const filteredData =
+    search === ""
+      ? data
+      : data.filter((d) =>
+          d.bodyshop.shopname.toLowerCase().includes(search.toLowerCase())
+        );
 
   return (
-    <Table
+    <Col span={24}>
-      title={() => (
+      <Card
+        title={
           <Typography.Title level={4}>
             {t("profile.labels.activeshop")}
           </Typography.Title>
-      )}
+        }
+        extra={
+          <Input.Search
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            allowClear
+            placeholder={t("general.labels.search")}
+          />
+        }
+      >
+        <Table
+          pagination={false}
           loading={loading}
           columns={columns}
           rowKey="id"
-      dataSource={data}
+          dataSource={filteredData}
         />
+      </Card>
+    </Col>
   );
 }

client/src/pages/profile/profile.page.jsx

@@ -1,3 +1,4 @@
+import { Row } from "antd";
 import React from "react";
 import ProfileMyComponent from "../../components/profile-my/profile-my.component";
 import ProfileShopsContainer from "../../components/profile-shops/profile-shops.container";
@@ -5,8 +6,10 @@ import ProfileShopsContainer from "../../components/profile-shops/profile-shops.
 export default function ProfilePage() {
   return (
     <div>
+      <Row gutter={[16, 16]}>
         <ProfileMyComponent />
         <ProfileShopsContainer />
+      </Row>
     </div>
   );
 }

client/src/translations/en_us/common.json

@@ -2747,7 +2747,9 @@
 				"photourl": "Avatar URL"
 			},
 			"labels": {
-				"actions": "Actions"
+				"actions": "Actions",
+				"changepassword": "Change Password",
+				"profileinfo": "Profile Info"
 			},
 			"successess": {
 				"passwordchanged": "Password changed successfully. "

client/src/translations/es/common.json

@@ -2747,7 +2747,9 @@
 				"photourl": "URL de avatar"
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"changepassword": "",
+				"profileinfo": ""
 			},
 			"successess": {
 				"passwordchanged": ""

client/src/translations/fr/common.json

@@ -2747,7 +2747,9 @@
 				"photourl": "URL de l'avatar"
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"changepassword": "",
+				"profileinfo": ""
 			},
 			"successess": {
 				"passwordchanged": ""