APR 15: [ADD] Initial Commit 'personal_organiser'

personal_organiser/README.rst

@@ -0,0 +1,54 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Personal Organiser
+========================
+This module will help users to efficiently manage their notes, tasks, and events.
+
+Features
+========
+* Note maker to take notes.
+* Contact book for a quick reference.
+* Task creator to manage activities.
+* Calendar for a quick reference of tasks.
+
+Configuration
+=============
+Nothing to configure.
+
+License
+-------
+General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer (V17) Athira K,
+  Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

personal_organiser/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

personal_organiser/__manifest__.py

@@ -0,0 +1,107 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': 'Personal Organiser',
+    'version': '17.0.1.0.0',
+    'category': 'Tools',
+    'summary': """The module allows to manage notes,tasks,and contacts effectively.""",
+    'description': """This module allows you to manage notes, tasks, and contacts effectively from all views in odoo. """,
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': ['base', 'web', 'calendar'],
+    'data': ['security/ir.model.access.csv',
+             ],
+
+    'assets': {
+        'web._assets_primary_variables': [
+            'personal_organiser/static/src/scss/variables.scss',
+        ],
+        'web._assets_backend_helpers': [
+            'personal_organiser/static/src/scss/mixins.scss',
+        ],
+        'web.assets_web_dark': [
+            (
+                'after',
+                'personal_organiser/static/src/scss/variables.scss',
+                'personal_organiser/static/src/scss/variables.dark.scss',
+            ),
+        ],
+        'web.assets_backend': [
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/layout.js',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.xml',
+                'personal_organiser/static/src/webclient/layout.xml',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/personalorganiser/personal_organiser.js',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/notemaker/notemaker.js',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/contacts/contacts.js',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/calender/calender.js',
+            ),
+            (
+                'after',
+                'web/static/src/webclient/webclient.js',
+                'personal_organiser/static/src/webclient/sidebar/sidebar.js',
+            ),
+            'personal_organiser/static/src/webclient/layout.scss',
+            'personal_organiser/static/src/webclient/sidebar/sidebar.scss',
+            'personal_organiser/static/src/webclient/personalorganiser/personal_organiser.xml',
+            'personal_organiser/static/src/webclient/notemaker/notemaker.xml',
+            'personal_organiser/static/src/webclient/contacts/contacts.xml',
+            'personal_organiser/static/src/webclient/calender/calender.xml',
+            'personal_organiser/static/src/webclient/sidebar/sidebar.xml',
+            'personal_organiser/static/src/webclient/personalorganiser/organizer.scss',
+            'personal_organiser/static/src/webclient/notemaker/notemaker.scss',
+            'personal_organiser/static/src/webclient/contacts/contacts.scss',
+            'personal_organiser/static/src/webclient/calender/calender.scss',
+        ],
+    },
+    'license': 'AGPL-3',
+    'images': [
+        'static/description/banner.jpg',
+        'static/description/icon.png',
+    ],
+    'installable': True,
+    'auto_install': False,
+    'application': True,
+}

personal_organiser/doc/RELEASE_NOTES.md

@@ -0,0 +1,6 @@
+## Module <personal_organiser>
+
+#### 29.03.2025
+#### Version 17.0.1.0.0
+##### ADD
+- Initial commit for Personal Organiser

personal_organiser/models/__init__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import personal_organiser
+from . import note_maker
+from . import org_contacts

personal_organiser/models/note_maker.py

@@ -0,0 +1,32 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import models, fields
+
+
+class NoteMaker(models.Model):
+    """This class is used to deal with notes"""
+    _name = "note.maker"
+    _description = "Note Maker"
+
+    note = fields.Text(string="Note", help="Note")
+    user_id = fields.Many2one('res.users', string="User")
+    note_title = fields.Char(string="Title", help="Title")

personal_organiser/models/org_contacts.py

@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import models, fields
+
+
+class OrgContacts(models.Model):
+    """This class is used to deal with contacts"""
+    _name = "org.contacts"
+    _description = "Contacts"
+
+    contact_id = fields.Many2one('res.partner', string="Contact")

personal_organiser/models/personal_organiser.py

@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author:Athira K(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import models, fields
+
+
+class PersonalOrganiser(models.Model):
+    """This class is used to cdeal with tasks"""
+    _name = "personal.organiser"
+    _description = "Personal Organiser"
+
+    user_id = fields.Many2one('res.users', string="User")
+    task_title = fields.Char(required=True, string="Title", help="Title")
+    date = fields.Datetime(required=True, string="Date", help="Date")
+    calendar_event_id = fields.Many2one('calendar.event', string='Calendar Event', ondelete='set null')

personal_organiser/security/ir.model.access.csv

@@ -0,0 +1,4 @@
+id,name,model_id/id,group_id/id,perm_read,perm_write,perm_create,perm_unlink
+access_personal_organiser,access_personal_organiser,model_personal_organiser,base.group_user,1,1,1,1
+access_note_maker,access_note_maker,model_note_maker,base.group_user,1,1,1,1
+access_org_contacts,access_org_contacts,model_org_contacts,base.group_user,1,1,1,1

personal_organiser/static/description/index.html

@@ -0,0 +1,776 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Odoo App 3 Index</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+          crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+          rel="stylesheet">
+</head>
+<body>
+<section>
+    <div class="container"
+         style="font-family: 'Inter', sans-serif !important;background-color: #fff !important;">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between flex-wrap align-items-sm-center"
+                 style="border-bottom:1px solid rgba(0, 0, 0, 0.22)">
+                <div class="my-3">
+                    <img src="assets/misc/Cybrosys R.png"
+                         style="width:auto !important; height:40px !important">
+                </div>
+                <div class="my-3 d-flex align-items-center">
+                    <div class="text-center"
+                         style="background-color:#017E84 !important;font-size: 0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;">
+                        Community
+                    </div>
+                    <div class="text-center"
+                         style="background-color:#875A7B !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important;min-width: 120px !important;">
+                        Enterprise
+                    </div>
+                    <div class="text-center"
+                         style="background-color:#7C7BAD !important; color:#fff !important;font-size: 0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width: 120px !important;">
+                        Odoo.sh
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12 text-center d-flex align-items-center flex-column"
+                 style="margin: 80px 0px !important;">
+                <h1 style="font-size: 2.8rem;font-weight: 700; color:
+                    #1A202C;">
+                    Personal Organiser</h1>
+                <p class="my-3 mb-4"
+                   style="max-width: 80%; font-weight: 400 !important; line-height: 32px; color: #718096;">
+                    Efficiently manage one's notes, tasks, and events
+                </p>
+                <div style="width: 80%; margin-top: 3rem;">
+                    <img src="assets/screenshots/hero.gif"
+                         class="img-responsive" width="100%" height="auto">
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5 mb-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#714b67 !important">
+                    Key Highlights
+                </p>
+            </div>
+            <div class="row py-4">
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Note maker</p>
+                            <p class="m-0" style="color:#718096"> Take a quick note from any view.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Task manager</p>
+                            <p class="m-0" style="color:#718096"> Manage your tasks and todo's more efficiently.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Address book</p>
+                            <p class="m-0" style="color:#718096"> Manage all contacts from here.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-12 p-3">
+                    <div class="d-flex   h-100" style="padding: 30px;border-radius: 12px;
+                                    background: #FFF;
+                                    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
+                        <div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
+                                    display: flex; justify-content: center; align-items: center;
+                                    margin-right: 10px; flex-shrink: 0;">
+                            <i class="fa-solid fa-star  "
+                               style="color: #fff;font-size:14px;"></i>
+                        </div>
+                        <div>
+                            <p style="color: #1A202C;font-weight: 600;
+                                      font-size: 1.2rem; margin-bottom: 2px;">
+                                Calender</p>
+                            <p class="m-0" style="color:#718096"> Calender for a quick view of of tasks and todo's.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container rounded">
+            <ul class="nav nav-tabs d-flex"
+                style="width: fit-content;margin: 0 auto;gap: 1rem;">
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            class="active show" data-toggle="tab" href="#tab1"
+                            style="color: #fff;font-weight: 500; background-color: #714B67; text-decoration: none;">
+                        <i class="fa-regular fa-image  pr-2"
+                           style="color: #fff;"></i>
+                        Screenshots</a></li>
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            data-toggle="tab" href="#tab2"
+                            style="color: #fff;font-weight: 500;  text-decoration: none;"><i
+                            class="fa-solid fa-star  pr-2"
+                            style="color: #fff;"></i>Features</a></li>
+                <li class="col text-center py-2 text-nowrap "
+                    style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
+                    <a
+                            data-toggle="tab" href="#tab3"
+                            style="color: #fff;font-weight: 500; text-decoration: none; background-color: #714B67;"><i
+                            class="fa-solid fa-book-open  pr-2"
+                            style="color: #fff;"></i>Released Notes</a></li>
+            </ul>
+            <div class="tab-content"
+                 style="background-color: rgba(121, 113, 119, 0.04);">
+                <div id="tab1" class="tab-pane fade in active show">
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/1.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2" style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    All notemaker, task manager, calender,
+                                    and contacts
+                                    were available in the sidebar.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px;  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/2.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Here you can add tasks with date.
+                                    Created tasks can be seen below as a list.
+                                    Options available to edit and delete tasks.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px;  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/3.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Here you can add notes with title.
+                                    Created notes can be seen below as a list.
+                                    Options available to edit and delete notes.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px;  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/4.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Here you can see all your contacts.
+                                    Also an option available to create a new one.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/5.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    Here you can view all your tasks and todo's
+                                    in a calender view.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12 py-2"
+                         style="padding: 1rem 4rem !important;">
+                        <div
+                                style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="row justify-content-center p-3 w-100 m-0">
+                                <img src="assets/screenshots/6.png"
+                                     class="img-responsive" width="100%"
+                                     height="auto">
+                            </div>
+                            <div class="px-3">
+                                <h4 class="mt-2"
+                                    style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
+                                    You can see a flag indicating count of tasks
+                                    expiring today.
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="tab2" class="tab-pane fade">
+                    <div class="col-mg-12" style="padding: 1rem 4rem;">
+                        <ul style="list-style: none; padding: 1rem 0;font-weight: 500;">
+                            <li class="py-3"
+                                style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                                    <span style="margin-right: 12px;"><img
+                                            src="assets/misc/star (1) 2.svg"
+                                            alt=""
+                                            width="16px"></span>Helps to manage
+                                tasks, todo's,and notes efficiently.
+                            </li>
+                            <li class="py-3"
+                                style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                                    <span style="margin-right: 12px;"><img
+                                            src="assets/misc/star (1) 2.svg"
+                                            alt=""
+                                            width="16px"></span>Available in
+                                Odoo 17.0
+                                Community and Enterprise.
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="tab3" class="tab-pane fade">
+                    <div class="col-mg-12 active"
+                         style="padding: 1rem 4rem;">
+                        <div class="py-3"
+                             style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
+                            <div class="d-flex mb-3"
+                                 style="font-size: 0.8rem; font-weight: 500;"><span>Version
+                                        17.0.1.0.0</span><span
+                                    class="px-2">|</span><span
+                                    style="color: #714B67;font-weight: 600;">Released on:17th October 2024</span>
+                            </div>
+                            <p class="m-0"
+                               style=" color:#718096!important; font-size:1rem !important;line-height: 28px;">
+                                Initial Commit for Personal Organiser.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Related Products</p>
+            </div>
+        </div>
+        <div id="myCarousel" class="carousel slide py-3"
+             data-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <div class="row p-4">
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/whatsapp_redirect/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/1.jpg"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Send Whatsapp Message
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/hr_payroll_community/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/2.jpg"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Odoo17 Payroll
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/dashboard_pos/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/3.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            POS Dashboard
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="row p-4">
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/export_stockinfo_xls/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px; ">
+                                            <img src="assets/modules/4.png"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            Export Product Stock In Excel
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/pos_restrict/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px;">
+                                            <img src="assets/modules/5.jpg"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            POS User Restrict
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="p-3">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/pos_order_line_image/"
+                                   style="color: #000; text-decoration: none;">
+                                    <div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
+                                        <div style="width: 300px;">
+                                            <img src="assets/modules/6.jpg"
+                                                 alt="" width="100%"
+                                                 height="auto">
+                                        </div>
+                                        <p class="text-center pt-2 text-black font-weight-bold">
+                                            POS Order Line Product Image
+                                        </p>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <a class="carousel-control-prev" href="#myCarousel"
+               data-slide="prev" style="width: 35px; color: #000;">
+                    <span class="carousel-control-prev-icon">
+                        <i class="fa fa-chevron-left"
+                           style="font-size: 24px;"></i>
+                    </span>
+            </a>
+            <a class="carousel-control-next" href="#myCarousel"
+               data-slide="next" style="width: 35px; color: #000;">
+                    <span class="carousel-control-next-icon">
+                        <i class="fa fa-chevron-right"
+                           style="font-size: 24px;"></i>
+                    </span>
+            </a>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Our Services</p>
+
+            </div>
+        </div>
+        <div class="container my-5">
+            <div class="row py-3">
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#13EA36 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/cogs.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Customization</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#DBC711; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/wrench.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Implementation</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#FF6B6B ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/lifebuoy.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Support</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#FFA801 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/user.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Hire
+                            Odoo Developer</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
+
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#54A0FF; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/puzzle.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Integration</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#6D7680 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/update.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Migration</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#786FA6 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/consultation.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Consultancy</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#F8A5C2 ; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/training.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Implementation</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 px-4 py-4">
+                    <div
+                            style="background-color: #fff; padding: 25px; text-align: center;  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
+                        <div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
+                            <div style="background-color:#E6BE26; border-radius: 50%; padding: 15px;    width: 68px;
+                                    height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
+                                <img src="assets/icons/license.png"
+                                     alt="service-icon" width="38px"
+                                     height="auto">
+                            </div>
+                        </div>
+                        <p style="margin-top: 20px; font-weight: bold;">Odoo
+                            Licensing Consultancy</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Our Industries</p>
+
+            </div>
+        </div>
+        <div class="container">
+            <div class="row my-5 py-4">
+                <div class="col-md-3 col-sm-6 p-0">
+                    <div class="d-flex flex-column h-100 "
+                         style="border-right: 1px solid rgb(209, 209, 209); border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px; box-shadow: 6px 0 10px rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/trading-black.png"
+                             width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                           font-size: 1.2rem; margin-bottom: 2px;">Trading</p>
+                        <p>Easily procure and sell your products</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px;">
+                        <img src="assets/icons/pos-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">POS</p>
+                        <p>Easy configuration and convivial experience</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209);border-bottom: 1px solid   rgba(0, 0, 0, 0.2); padding: 30px; box-shadow: 0 5px 10px  rgba(228, 227, 227, 0.373)">
+                        <img src="assets/icons/education-black.png"
+                             width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Education</p>
+                        <p>A platform for educational management</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6  p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-bottom: 1px solid  rgb(209, 209, 209); padding: 30px; ">
+                        <img src="assets/icons/manufacturing-black.png"
+                             width="42px" height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Manufacturing</p>
+                        <p>Plan, track and schedule your operations</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6 p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px;">
+                        <img src="assets/icons/ecom-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">E-commerce &
+                            Website</p>
+                        <p>Mobile friendly, awe-inspiring product pages</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6   p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px;box-shadow: 0 -5px 10px  rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/service-black.png"
+                             width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">Service
+                            Management</p>
+                        <p>Keep track of services and invoice</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6    p-0">
+                    <div class="d-flex flex-column h-100"
+                         style="border-right: 1px solid  rgb(209, 209, 209); padding: 30px; ">
+                        <img src="assets/icons/restaurant-black.png"
+                             width="42px" height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">
+                            Restaurant</p>
+                        <p>Run your bar or restaurant methodically</p>
+                    </div>
+                </div>
+                <div class="col-md-3 col-sm-6   p-0">
+                    <div class="d-flex flex-column h-100"
+                         style=" padding: 30px;box-shadow: -5px 0 10px  rgba(228, 227, 227, 0.373);">
+                        <img src="assets/icons/hotel-black.png" width="42px"
+                             height="auto" alt="">
+                        <p style="color: #714B67;font-weight: 600; margin-top: 10px;
+                            font-size: 1.2rem; margin-bottom: 2px;">Hotel
+                            Management</p>
+                        <p>An all-inclusive hotel management application</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-5">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
+                <p class="m-0"
+                   style="font-weight: 600; font-size: 24px; color:#000 !important">
+                    Support</p>
+            </div>
+        </div>
+        <div class="container my-5">
+            <div class="row" style="background-color: #FFFAFE;">
+                <div class="col-md-6 pb-4  d-flex align-items-center justify-content-center"
+                     style="border-right: 1px solid #D9D9D9;">
+                    <div style="padding: 30px;">
+                        <div class="d-flex align-items-center">
+                            <img src="assets/misc/support (1) 1.svg" alt=""
+                                 width="60px" style="margin-right: 12px;">
+                            <div style="padding: 0px 8px;">
+                                    <span
+                                            style="color: #714B67;font-size: 24px;font-weight: 600;padding-bottom: 1rem;">Need
+                                        Help?</span>
+                                <p class="m-0" style="color:#718096;">Got
+                                    questions or need help? Get in
+                                    touch.</p>
+                                <div style="font-weight: 400;"><span><img
+                                        src="assets/misc/support-email.svg"
+                                        alt=""
+                                        width="18px"
+                                        style="filter: invert(1);margin-right: 0.8rem;"></span>odoo@cybrosys.com
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 pb-4 d-flex align-items-center justify-content-center">
+                    <div style="padding: 30px;">
+                        <div class="d-flex align-items-center">
+                            <img src="assets/misc/whatsapp 1.svg" alt=""
+                                 width="60px" style="margin-right: 12px;">
+                            <div>
+                                <span style="color: #714B67;font-size: 24px;font-weight: 600;">WhatsApp</span>
+                                <p class="m-0" style="color:#718096;">Say hi
+                                    to
+                                    us on WhatsApp!</p>
+                                <div style="font-weight: 400; font-size: 16px;"><span><img
+                                        src="assets/misc/phone.svg"
+                                        alt="" width="14px"
+                                        style="filter: invert(1); margin-right: 0.8rem;"></span>+91
+                                    99456767686
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

personal_organiser/static/src/scss/mixins.scss

@@ -0,0 +1,7 @@
+@mixin disable-scrollbar {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+    &::-webkit-scrollbar {
+	  display: none;
+	}
+}

personal_organiser/static/src/scss/variables.dark.scss

@@ -0,0 +1,2 @@
+$appbar-color: #E4E4E4 !default;
+$appbar-background: #3C3E4B !default;

personal_organiser/static/src/scss/variables.scss

@@ -0,0 +1,3 @@
+$appbar-color: #dee2e6 !default;
+$appbar-active: $o-brand-primary !default;
+$appbar-background: #111827 !default;

personal_organiser/static/src/webclient/calender/calender.js

@@ -0,0 +1,95 @@
+/** @odoo-module **/
+import { Component, useState } from '@odoo/owl';
+import { useService } from '@web/core/utils/hooks';
+
+export class MiniCalendar extends Component {
+    "Component to deal with calendar events"
+    static template = 'personal_organiser.mini_calendar';
+
+    setup() {
+        this.orm = useService('orm');
+        this.user = useService('user');  // Add user service to get current user info
+        this.currentDate = new Date();
+        this.state = useState({
+            daysInMonth: [],        // Days in the current month with event flags
+            selectedDate: null,      // Currently selected date
+            selectedDayEvents: [],   // Events for the selected date
+        });
+        this.loadEvents();  // Load all events on component setup
+    }
+
+    // Method to load events from the backend
+    async loadEvents() {
+        const today = this.formatDate(new Date());  // Current date in YYYY-MM-DD format
+        try {
+            // Fetch events that start after today AND belong to the current user
+            this.events = await this.orm.searchRead("calendar.event", [
+                ["start_date", ">=", today],
+                ["user_id", "=", this.user.userId],  // Filter by current user
+            ]);
+        } catch (error) {
+            console.error("Error loading events:", error);
+        }
+        this.updateCalendar();  // Update the calendar once events are loaded
+    }
+
+    // Method to update the calendar view with event flags
+    updateCalendar() {
+        const year = this.currentDate.getFullYear();
+        const month = this.currentDate.getMonth();
+        const lastDate = new Date(year, month + 1, 0).getDate();
+
+        // Generate days for the current month and check if they have events
+        this.state.daysInMonth = Array.from({ length: lastDate }, (_, day) => {
+            const currentDay = day + 1;
+            const currentDate = new Date(year, month, currentDay);
+            const hasEvent = this.events.some(event => {
+                const eventDateString = event.start_date;
+                const eventDate = new Date(`${eventDateString}T00:00:00`);
+                const normalizedEventDate = new Date(eventDate.getFullYear(),
+                    eventDate.getMonth(), eventDate.getDate());
+                const normalizedCurrentDate = new Date(currentDate.getFullYear(),
+                    currentDate.getMonth(), currentDate.getDate());
+                return normalizedEventDate.getTime() === normalizedCurrentDate.getTime();
+            });
+            return {
+                date: currentDate,
+                hasEvent,
+            };
+        });
+    }
+
+    // Method to handle day selection and load events for the selected day
+    async selectDay(day) {
+        this.state.selectedDate = day.date;
+        await this.fetchEventsForDay(day.date);  // Fetch events for the selected day
+    }
+
+    // Fetch events for the selected day
+    async fetchEventsForDay(date) {
+        try {
+            const dateStr = this.formatDate(date); // Format the date as YYYY-MM-DD
+            const events = await this.orm.searchRead('calendar.event', [
+                ['start_date', '=', dateStr],  // Query events for this date
+                ['user_id', '=', this.user.userId],  // Filter by current user
+            ], ['name', 'description', 'start_date']);
+
+            this.state.selectedDayEvents = events;  // Set the events for the selected day
+        } catch (error) {
+            console.error("Error fetching events:", error);
+        }
+    }
+
+    // Helper function to format date as YYYY-MM-DD (handling timezone correctly)
+    formatDate(date) {
+        // Set the time to 00:00:00 for consistency
+        date.setHours(0, 0, 0, 0);
+
+        // Format the date to YYYY-MM-DD
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+        const day = String(date.getDate()).padStart(2, '0');
+
+        return `${year}-${month}-${day}`;
+    }
+}

personal_organiser/static/src/webclient/calender/calender.scss

@@ -0,0 +1,97 @@
+/* The main container for the calendar */
+.calendar {
+    float: left;
+    background-color: #f7f7f7; /* Light background color for better contrast */
+    justify-content: space-between;
+    white-space: nowrap;
+    height: 100%;
+    padding-top: 20px;
+    padding-bottom: 20px; /* Added padding for better spacing */
+    border-radius: 8px; /* Rounded corners */
+}
+
+/* Mini Calendar container */
+.mini-calendar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%; /* Ensure it takes full available width */
+    max-width: 400px; /* Optional: limits the width on large screens */
+    margin: auto; /* Centering the calendar */
+}
+
+/* Calendar header */
+.calendar-header {
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+/* Grid layout for the calendar days */
+.calendar-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr); /* 7 days in a week */
+    gap: 5px;
+    width: 100%;
+}
+
+/* Individual day cell */
+.calendar-day {
+    height: 40px; /* Increased the height for better visibility */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 50%; /* Circular appearance for days */
+    font-size: 1em; /* Adjust font size */
+    transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover */
+    cursor: pointer; /* Show pointer cursor when hovering */
+    margin: 2px; /* Slight margin to create a gap between the cells */
+}
+
+/* Hover effect for clickable days */
+.calendar-day:hover {
+    background-color: #e0e0e0; /* Lighter background on hover */
+    transform: scale(1.1); /* Slight scale effect when hovered */
+}
+
+/* Highlight days with events (with a slight gap) */
+.calendar-day.calendar-event {
+    background-color: #4caf50; /* Green background for days with events */
+    color: white;
+    font-weight: bold;
+    margin: 5px; /* Add margin for gap between event days */
+}
+
+/* Selected day styling */
+.calendar-day.selected {
+    background-color: #2196f3; /* Blue color for selected day */
+    color: white;
+    font-weight: bold;
+}
+
+/* Event cards section */
+.event-cards .card {
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #fff;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
+}
+
+.event-cards .card-title {
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+.event-cards .card-text {
+    font-size: 0.9em;
+    color: #555;
+}
+
+.event-cards .text-muted {
+    font-size: 0.8em;
+    color: #777;
+}

personal_organiser/static/src/webclient/calender/calender.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates xml:space="preserve">
+    <t t-name="personal_organiser.mini_calendar">
+        <div class="mini-calendar">
+            <div class="calendar-header">
+                <h3>
+                    <t t-esc="currentDate.toLocaleString('default', { month: 'long' })"/>
+                    <t t-esc="currentDate.getFullYear()"/>
+                </h3>
+            </div>
+            <div class="calendar-days">
+                <t t-if="state.daysInMonth.length > 0">
+                    <t t-foreach="state.daysInMonth" t-as="day" t-key="day.date.getTime()">
+                        <div
+                            class="calendar-day"
+                            t-att-class="day.hasEvent ? 'calendar-event' : ''"
+                            t-on-click="() => this.selectDay(day)"
+                            style="cursor: pointer;"
+                        >
+                            <t t-esc="day.date.getDate()"/>
+                        </div>
+                    </t>
+                </t>
+                <t t-else="">
+                    <p>No days to display.</p>
+                </t>
+            </div>
+        </div>
+
+        <!-- Display events for the selected day -->
+        <t t-if="state.selectedDayEvents.length > 0">
+            <div class="events-list">
+                <br/>
+                <h4>Events on <t t-esc="state.selectedDate.toLocaleDateString()"/></h4>
+                <div class="event-cards">
+                    <t t-foreach="state.selectedDayEvents" t-as="event" t-key="event.id">
+                        <div class="card mb-2" style="max-width: 20rem;">
+                            <div class="card-body">
+                                <h5 class="card-title" t-esc="event.name"/>
+                                <small class="text-muted" t-esc="new Date(event.start_date).toLocaleDateString()"/>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+            </div>
+        </t>
+        <t t-else="">
+            <p><br/>No events for this day.</p>
+        </t>
+    </t>
+</templates>

personal_organiser/static/src/webclient/contacts/contacts.js

@@ -0,0 +1,49 @@
+/** @odoo-module **/
+import { Component,useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+export class OrgContacts extends Component {
+    "component to manage all the contacts"
+    static template = 'personal_organiser.orgcontacts';
+    setup() {
+        this.orm = useService("orm");
+        this.state = useState({
+            contacts: [],
+             name: '',
+            email: '',
+            showInputFields: false,
+        });
+        this.fetchContacts();
+    }
+    async fetchContacts() {
+        try {
+            this.state.contacts = await this.orm.searchRead("res.partner", [],
+                                               ['name', 'email','image_1920']);
+        } catch (error) {
+            console.error('Error fetching contacts:', error);
+        }
+    }
+     toggleInputFields() {
+        this.state.showInputFields = !this.state.showInputFields;
+    }
+
+    async createContact() {
+        try {
+            const contactData = {
+                name: this.state.name,
+                email: this.state.email,
+            };
+
+            const partnerId = await this.orm.create('res.partner', [contactData]);
+            this.state.name = '';
+            this.state.email = '';
+            this.state.showInputFields = false;
+        } catch (error) {
+            console.error('Error creating contact:', error);
+        }
+    }
+    onClickDiv(event) {
+        console.log(event,"event")
+        const el = event.srcElement.nextSibling;
+        el.style.display = (el.style.display === "block") ? "none" : "block";
+    }
+}

personal_organiser/static/src/webclient/contacts/contacts.scss

@@ -0,0 +1,8 @@
+.contacts-container {
+    float:left;
+    background-color: light;
+    justify-content: space-between;
+	white-space: nowrap;
+    height: 100%;
+    padding-top: 20px;
+}

personal_organiser/static/src/webclient/contacts/contacts.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates xml:space="preserve">
+    <t t-name="personal_organiser.orgcontacts">
+        <div>
+           <div class="align-items-center mb-4">
+               <h2 class="text-center mb-0">Contacts</h2>
+                <!-- Create Contact Button -->
+                    <button class="btn-danger me-3" style="width: 100%;" t-on-click="toggleInputFields">
+                        <t t-if="!state.showInputFields">Create new contact</t>
+                        <t t-else="">Cancel</t>
+                    </button>
+                <!-- Contacts Heading with flex-grow -->
+           </div>
+           <div t-if="state.showInputFields" class="mt-3">
+                <input type="text" placeholder="Name" t-model="state.name" />
+                <input type="email" placeholder="Email" t-model="state.email" />
+                <button class="btn btn-success" t-on-click="createContact"
+                        t-att-disabled="!(state.name and state.email)">
+                    Save
+                </button>
+           </div>
+           <!--show contacts as cards-->
+           <div style="padding-left:0px;">
+                <div style="max-height:810px; overflow-y: auto;">
+                    <t t-foreach="state.contacts" t-as="contact"
+                       t-key="contact.id"
+                       class="list-group-item d-flex
+                                 justify-content-between align-items-center">
+                       <div class="card" style="width:100%;">
+                            <div class="card-body align-items-center"
+                                 style=" text-wrap: wrap; ">
+                                <h5 class="mb-1" style="padding-left:5px  ">
+                                    <a t-att-href="'/web#id=' + contact.id +
+                                                    '&amp;model=res.partner'"
+                                       t-esc="contact.name"
+                                       class="text-decoration-none"
+                                       target="_blank">
+                                    </a><br/>
+                                    <t t-esc="contact.email"/>
+                                </h5>
+                            </div>
+                       </div>
+                    </t>
+                </div>
+           </div>
+        </div>
+    </t>
+</templates>

personal_organiser/static/src/webclient/layout.js

@@ -0,0 +1,10 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { WebClient } from '@web/webclient/webclient';
+import {Sidebar} from "@personal_organiser/webclient/sidebar/sidebar";
+patch(WebClient, {
+    components: {
+        ...WebClient.components,
+        Sidebar,
+    },
+})

personal_organiser/static/src/webclient/layout.scss

@@ -0,0 +1,52 @@
+.o_web_client {
+    display: grid !important;
+    grid-template-areas:
+        "banner banner"
+        "navbar navbar"
+        "components components"
+        "content sidebar";
+    grid-template-columns: 1fr 100px;
+    grid-template-rows: auto auto 1fr;
+
+    > div:has(#oe_neutralize_banner) {
+        grid-area: banner;
+    }
+    > .o_navbar {
+        grid-area: navbar;
+    }
+    > .o_action_manager {
+        grid-area: content;
+    }
+    > .o-main-components-container {
+        grid-area: components;
+    }
+    > .sidebar_panel {
+        grid-area: sidebar;
+        width: 100px; /* Fixed width for the sidebar */
+        overflow-y: auto; /* Allow scrolling if content overflows */
+        padding-top:0px;
+    }
+    > .task, > .note, > .contacts, > .calender {
+        grid-row: 4; /* Ensure all organizers occupy the same grid row */
+        width: 300px; /* Fixed width for the organizers */
+    }
+
+    /* Responsive styles */
+    @media (max-width: 700px) {
+        .o_web_client {
+            grid-template-areas:
+                "banner"
+                "navbar"
+                "components"
+                "content"
+                "sidebar"; /* Stack elements vertically */
+            grid-template-columns: 1fr; /* Full width for all items */
+        }
+        > .sidebar_panel {
+            width: 100%; /* Make sidebar full width on small screens */
+        }
+        > .task, > .note, > .contacts, > .calender {
+            width: 100%; /* Make organizers full width on small screens */
+        }
+    }
+}

personal_organiser/static/src/webclient/layout.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t
+		t-name="peronal_organiser.WebClient"
+		t-inherit="web.WebClient"
+		t-inherit-mode="extension"
+	>
+	    <xpath expr="//ActionContainer" position="after">
+			<Sidebar/>
+        </xpath>
+    </t>
+</templates>

personal_organiser/static/src/webclient/notemaker/notemaker.js

@@ -0,0 +1,110 @@
+/** @odoo-module **/
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+
+export class NoteMaker extends Component {
+    /**
+     * Component to manage notes.
+     */
+    static template = 'personal_organiser.notemaker';
+
+    setup() {
+        this.orm = useService("orm");
+        this.state = useState({
+            newNote: '',
+            note_title: '',
+            notes: [],
+        });
+        this.fetchUserNotes();
+    }
+
+    /**
+     * Fetches all notes for the current user and updates the state.
+     */
+    async fetchUserNotes() {
+        try {
+            this.state.notes = await this.orm.searchRead("note.maker",
+                [["user_id", "=", this.orm.user.userId]],
+                ['id', 'note_title', 'note']
+            );
+        } catch (error) {
+            console.error("Error fetching notes:", error);
+        }
+    }
+
+    /**
+     * Adds a new note for the user.
+     */
+    async addNote() {
+        if (!this.state.newNote || !this.state.note_title) {
+            console.log("Note title and content cannot be empty.");
+            return;
+        }
+
+        try {
+            const [noteId] = await this.orm.create("note.maker", [{
+                user_id: this.orm.user.userId,
+                note: this.state.newNote,
+                note_title: this.state.note_title,
+            }]);
+
+            const newNote = {
+                id: noteId,
+                note_title: this.state.note_title,
+                note: this.state.newNote,
+            };
+
+            this.state.notes.push(newNote);
+
+            // Clear the input fields
+            this.state.newNote = '';
+            this.state.note_title = '';
+        } catch (error) {
+            console.error("Error adding note:", error);
+        }
+    }
+
+    /**
+     * Deletes a note by its ID.
+     */
+    async deleteNote(note) {
+        if (note.id) {
+            try {
+                await this.orm.unlink("note.maker", [note.id]);
+                this.state.notes = this.state.notes.filter(n => n.id !== note.id);
+                console.log("Note deleted successfully");
+            } catch (error) {
+                console.error("Error deleting note:", error);
+            }
+        } else {
+            console.error("Note ID is missing:", note);
+        }
+    }
+
+    /**
+     * Toggles the edit mode for a note.
+     */
+    editNote(note) {
+        note.isEditing = !note.isEditing;
+    }
+
+    /**
+     * Saves changes made to a note.
+     */
+    async saveNote(note) {
+        if (note.id) {
+            try {
+                await this.orm.write("note.maker", [note.id], {
+                    note_title: note.note_title,
+                    note: note.note,
+                });
+                note.isEditing = false;
+                console.log("Note updated successfully");
+            } catch (error) {
+                console.error("Error saving note:", error);
+            }
+        } else {
+            console.error("Note ID is missing:", note);
+        }
+    }
+}

personal_organiser/static/src/webclient/notemaker/notemaker.scss

@@ -0,0 +1,6 @@
+.note-maker {
+    justify-content: space-between;
+	white-space: nowrap;
+    height: 100%;
+    padding-top: 20px;
+}

personal_organiser/static/src/webclient/notemaker/notemaker.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates xml:space="preserve">
+    <t t-name="personal_organiser.notemaker">
+        <div class="note-maker rounded shadow" style="padding: 0; margin: 0;">
+            <h2 class="text-center mb-3" style="margin: 0;">Notes</h2>
+            <div style="padding: 0; margin: 0;">
+                <input type="text" t-model="state.note_title"
+                       class="form-control mt-2"
+                       placeholder="Note Title" style="margin: 0;"/>
+                <textarea t-model="state.newNote" class="form-control mt-2"
+                          placeholder="Write your note here..." rows="4" style="margin: 0;">
+                </textarea>
+                <button t-on-click="addNote" class="btn btn-primary mt-2"
+                        t-att-disabled="!(state.note_title and state.newNote)"
+                        style="width: 100%;">
+                    Save
+                </button>
+            </div>
+            <div>
+                <t t-if="state.notes.length > 0">
+                    <h3 class="mt-3" style="margin: 0; text-align:center;">Notes</h3>
+                </t>
+            </div>
+            <!-- Notes as cards -->
+            <div style="max-height: 400px; overflow-y: auto; padding: 0; margin: 0;">
+                <t t-foreach="state.notes" t-as="note" t-key="note.id">
+                    <div style="padding: 0; margin: 0;">
+                        <!-- Add light brown border to the card -->
+                        <div class="card" style="margin: 0; width: 100%; min-height:120px; background-color: #f8f9fa; border: 2px solid #d2b48c;">
+                            <div class="card-body" style="padding: 0;">
+                                <div class="d-flex justify-content-between align-items-start">
+                                    <div style="flex: 1; padding: 0;">
+                                        <!-- Show note title as editable input field when in edit mode -->
+                                        <h5 class="card-title mb-1" t-if="!note.isEditing" t-esc="note.note_title" />
+                                        <input t-if="note.isEditing" t-model="note.note_title" class="form-control" style="margin-bottom: 8px;" />
+
+                                        <!-- Show note content as editable textarea when in edit mode -->
+                                        <div class="card-text mb-0" style="white-space: pre-line; padding: 0;" t-if="!note.isEditing" t-esc="note.note" />
+                                        <textarea t-if="note.isEditing" t-model="note.note" class="form-control" style="margin-bottom: 8px;" rows="4"></textarea>
+                                    </div>
+                                    <div class="dropdown">
+                                        <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+                                        </button>
+                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
+                                            <li><a class="dropdown-item" href="#" t-on-click="(event) => this.editNote(note)">Edit</a></li>
+                                            <li><a class="dropdown-item" href="#" t-on-click="(event) => this.deleteNote(note)">Delete</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <!-- Save button appears only when editing -->
+                                <div t-if="note.isEditing">
+                                    <button t-on-click="(event) => this.saveNote(note)" class="btn btn-success mt-2" style="width: 100%;">Save</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </t>
+</templates>

personal_organiser/static/src/webclient/personalorganiser/organizer.scss

@@ -0,0 +1,8 @@
+.sidebar_panel {
+    float:left;
+    background-color: grey;
+    justify-content: space-between;
+	white-space: nowrap;
+    height: 100%;
+    padding-top: 20px;
+}

personal_organiser/static/src/webclient/personalorganiser/personal_organiser.js

@@ -0,0 +1,230 @@
+/** @odoo-module **/
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+
+export class PersonalOrganizer extends Component {
+    static template = 'personal_organiser.task';
+
+    setup() {
+        this.orm = useService("orm");
+        this.action = useService("action");
+        this.notification = useService("notification");
+        this.state = useState({
+            newTask: '',
+            date: '',
+            tasks: [],
+        });
+        this.fetchUserData();
+    }
+
+    async fetchUserData() {
+        try {
+            const tasks = await this.orm.searchRead("personal.organiser", [
+                ["user_id", "=", this.orm.user.userId]
+            ], ['task_title', 'date', 'id']);
+
+            // Ensure dates are properly formatted
+            this.state.tasks = tasks.map(task => ({
+                ...task,
+                date: task.date ? task.date.split(' ')[0] : '', // Extract just the date part
+            }));
+
+            // Sort tasks by date
+            this.state.tasks.sort((a, b) => new Date(a.date) - new Date(b.date));
+        } catch (error) {
+            console.error('Error fetching user data:', error);
+            this.notification.notify({
+                title: 'Error',
+                message: 'Failed to fetch tasks',
+                type: 'danger',
+            });
+        }
+    }
+
+    async refreshCalendarView() {
+    try {
+        // Check if user has access to calendar events
+        const hasAccess = await this.orm.call(
+            'calendar.event',
+            'check_access_rights',
+            ['read'],
+            { raise_exception: false }
+        );
+
+        if (hasAccess) {
+            // Reload calendar view
+            await this.action.doAction({
+                type: 'ir.actions.client',
+                tag: 'reload',
+                params: {
+                    model: 'calendar.event',
+                    view_type: 'calendar'
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Error refreshing calendar:', error);
+    }
+}
+
+    async addTask() {
+        if (!this.state.newTask || !this.state.date) {
+            this.notification.notify({
+                title: 'Warning',
+                message: 'Please enter both task title and date',
+                type: 'warning',
+            });
+            return;
+        }
+
+        const taskData = {
+            user_id: this.orm.user.userId,
+            date: this.state.date,
+            task_title: this.state.newTask,
+        };
+
+        try {
+            // Create task in personal.organiser
+            const taskId = await this.orm.create("personal.organiser", [taskData]);
+
+            // Create event in calendar
+            const calendarEventId = await this.orm.create("calendar.event", [{
+                name: this.state.newTask,
+                start: this.state.date,
+                stop: this.state.date,
+                start_date: this.state.date,
+                stop_date: this.state.date,
+                user_id: this.orm.user.userId,
+                allday: true,
+            }]);
+
+            // Add complete task data to state
+            const newTask = {
+                id: taskId[0],
+                calendar_event_id: calendarEventId[0],
+                task_title: this.state.newTask,
+                date: this.state.date,
+                user_id: this.orm.user.userId,
+            };
+
+            // Add to state and sort
+            this.state.tasks.push(newTask);
+            this.state.tasks.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+            // Clear input fields
+            this.state.newTask = '';
+            this.state.date = '';
+
+            // Refresh calendar view
+            await this.refreshCalendarView();
+
+        } catch (error) {
+            console.error('Error adding task:', error);
+            this.notification.notify({
+                title: 'Error',
+                message: 'Failed to add task',
+                type: 'danger',
+            });
+        }
+    }
+
+    async deleteTask(task) {
+        try {
+            // Find all related calendar events
+            const calendarEvents = await this.orm.searchRead("calendar.event", [
+                ["name", "=", task.task_title],
+                ["user_id", "=", this.orm.user.userId]
+            ], ['id']);
+
+            // Remove the task from state
+            this.state.tasks = this.state.tasks.filter(t => t.id !== task.id);
+
+            // Delete from personal.organiser
+            await this.orm.unlink("personal.organiser", [task.id]);
+
+            // Delete all related calendar events
+            if (calendarEvents && calendarEvents.length > 0) {
+                const calendarEventIds = calendarEvents.map(event => event.id);
+                await this.orm.unlink("calendar.event", calendarEventIds);
+            }
+
+            // Refresh calendar view
+            await this.refreshCalendarView();
+
+        } catch (error) {
+            console.error('Error deleting task:', error);
+            this.notification.notify({
+                title: 'Error',
+                message: 'Failed to delete task',
+                type: 'danger',
+            });
+        }
+    }
+
+    async onInputChange(event, task, field) {
+        const oldValue = task[field];
+        const newValue = event.target.value;
+
+        // Validate date if updating date field
+        if (field === 'date' && !newValue) {
+            this.notification.notify({
+                title: 'Warning',
+                message: 'Please enter a valid date',
+                type: 'warning',
+            });
+            return;
+        }
+
+        try {
+            // First find all existing calendar events with the old title
+            const oldCalendarEvents = await this.orm.searchRead("calendar.event", [
+                ["name", "=", task.task_title],
+                ["user_id", "=", this.orm.user.userId]
+            ], ['id']);
+
+            // Delete old calendar events
+            if (oldCalendarEvents && oldCalendarEvents.length > 0) {
+                const oldEventIds = oldCalendarEvents.map(event => event.id);
+                await this.orm.unlink("calendar.event", oldEventIds);
+            }
+
+            // Update personal.organiser
+            await this.orm.write("personal.organiser", [task.id], {
+                [field]: newValue
+            });
+
+            // Create new calendar event
+            const calendarEventId = await this.orm.create("calendar.event", [{
+                name: field === 'task_title' ? newValue : task.task_title,
+                start: field === 'date' ? newValue : task.date,
+                stop: field === 'date' ? newValue : task.date,
+                start_date: field === 'date' ? newValue : task.date,
+                stop_date: field === 'date' ? newValue : task.date,
+                user_id: this.orm.user.userId,
+                allday: true,
+            }]);
+
+            // Update task in state
+            task[field] = newValue;
+            task.calendar_event_id = calendarEventId[0];
+
+            // Resort tasks if date was changed
+            if (field === 'date') {
+                this.state.tasks.sort((a, b) => new Date(a.date) - new Date(b.date));
+            }
+
+            // Refresh calendar view
+            await this.refreshCalendarView();
+
+        } catch (error) {
+            console.error('Error updating task:', error);
+            // Revert the state change on error
+            task[field] = oldValue;
+            this.notification.notify({
+                title: 'Error',
+                message: 'Failed to update task',
+                type: 'danger',
+            });
+        }
+    }
+}

personal_organiser/static/src/webclient/personalorganiser/personal_organiser.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates xml:space="preserve">
+    <t t-name="personal_organiser.task">
+        <div style="margin: 0; padding: 0;">
+            <div class="sidebar bg-grey text-white" style="margin: 0; padding: 0; width: 300px;">
+                <h2 class="text-center" style="margin: 0;">Tasks</h2>
+                <div style="padding: 0;">
+                    <input type="text"
+                           t-model="state.newTask"
+                           class="mt-2 form-control"
+                           placeholder="Add a new task"
+                           required="True"
+                           style="margin: 0; width: 100%;"/>
+                    <input type="date"
+                           t-model="state.date"
+                           class="form-control mt-2"
+                           placeholder="Date/time"
+                           required="True"
+                           style="margin: 0; width: 100%;"/>
+                    <button t-on-click="addTask"
+                            class="btn btn-primary mt-2"
+                            t-att-disabled="!(state.newTask and state.date)"
+                            style="width: 100%;">
+                        Create
+                    </button>
+                </div>
+                <div>
+                    <t t-foreach="state.tasks" t-as="task" t-key="task.id">
+                        <div style="padding: 0; margin: 0;">
+                            <div class="card"
+                                 t-att-style="task_index % 2 === 0 ? 'background-color: brown;' : 'background-color: black;'"
+                                 style="width: 100%; margin: 0;">
+                                <div class="card-body" style="padding: 0;">
+                                    <div class="d-flex justify-content-between align-items-start">
+                                        <textarea
+                                            class="form-control"
+                                            t-att-value="task.task_title"
+                                            t-on-change="(event) => this.onInputChange(event, task, 'task_title')"
+                                            style="margin: 0; width: 100%; white-space: normal; word-wrap: break-word;"
+                                        />
+                                    </div>
+                                    <div class="d-flex justify-content-between align-items-start">
+                                        <input type="date"
+                                               class="form-control"
+                                               t-att-value="task.date"
+                                               t-on-change="(event) => this.onInputChange(event, task, 'date')"
+                                               style="margin: 0; width: 100%;" />
+                                    </div>
+                                    <div class="d-flex justify-content-between align-items-end">
+                                        <button class="btn btn-sm"
+                                                t-on-click="() => this.deleteTask(task)"
+                                                style="width: auto;">
+                                            <img src="personal_organiser/static/src/img/bin.png"
+                                                 alt="Delete"
+                                                 aria-label="Delete"
+                                                 style="width: 20px; height: 20px;"/>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

personal_organiser/static/src/webclient/sidebar/sidebar.js

@@ -0,0 +1,95 @@
+/** @odoo-module **/
+import { Component,useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import {PersonalOrganizer} from "@personal_organiser/webclient/personalorganiser/personal_organiser";
+import {OrgContacts} from "@personal_organiser/webclient/contacts/contacts";
+import {NoteMaker} from "@personal_organiser/webclient/notemaker/notemaker";
+import {MiniCalendar} from "@personal_organiser/webclient/calender/calender";
+export class Sidebar extends Component {
+    static template = 'personal_organiser.sidebar';
+    static components={PersonalOrganizer,NoteMaker,OrgContacts,MiniCalendar};
+    setup() {
+        this.state = useState({
+            todaysTasks: [],
+        });
+        this.orm = useService('orm');
+        this.user = useService('user');
+        this.checkTodaysTasks();
+    }
+    async checkTodaysTasks() {
+        const today = new Date().toISOString().split('T')[0];
+        this.state.todaysTasks = await this.orm.search("calendar.event", [
+                ["start_date", "=", today],
+                ["user_id", "=", this.user.userId]
+            ]);
+    }
+    showNewSidebar(contentType) {
+        document.addEventListener('DOMContentLoaded', () => {
+            const task = this.el.querySelector('#task');
+            const note = this.el.querySelector('#note');
+            const contacts = this.el.querySelector('#contacts');
+            const calender = this.el.querySelector('#calender');
+        });
+        // Show the selected component
+        if (contentType === "task") {
+            note.style.display = 'none';
+            contacts.style.display = 'none';
+            calender.style.display = 'none';
+            if (task.style.display ==='block'){
+            task.style.display = 'none';
+            }
+            else{
+            task.style.display = 'block';
+            }
+        } else if (contentType === "note") {
+            task.style.display = 'none';
+            calender.style.display = 'none';
+            contacts.style.display = 'none';
+            if (note.style.display ==='block'){
+            note.style.display = 'none';
+            }
+            else{
+            note.style.display = 'block';
+            }
+        } else if (contentType === "contacts") {
+            task.style.display = 'none';
+            note.style.display = 'none';
+            calender.style.display = 'none';
+            if (contacts.style.display ==='block'){
+            contacts.style.display = 'none';
+            }
+            else{
+            contacts.style.display = 'block';
+            }
+        } else if (contentType === "calender") {
+            task.style.display = 'none';
+            contacts.style.display = 'none';
+            note.style.display = 'none';
+            if (calender.style.display ==='block'){
+            calender.style.display = 'none';
+            }
+            else{
+            calender.style.display = 'block';
+            }        }
+    }
+    closePanel(content){
+        document.addEventListener('DOMContentLoaded', () => {
+            const task = this.el.querySelector('#task');
+            const note = this.el.querySelector('#note');
+            const contacts = this.el.querySelector('#contacts');
+            const calender = this.el.querySelector('#calender');
+        });
+        if(content==='task'){
+            task.style.display = 'none';
+        }
+        if(content==='note'){
+            note.style.display = 'none';
+        }
+        if(content==='contacts'){
+            contacts.style.display = 'none';
+        }
+        if(content==='calender'){
+            calender.style.display = 'none';
+        }
+    }
+}

personal_organiser/static/src/webclient/sidebar/sidebar.scss

@@ -0,0 +1,56 @@
+.sidebar_panel {
+    @include disable-scrollbar();
+    width: var(--sidebar-width, 0);
+    overflow-y: auto;
+    .sidebar {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+	    white-space: nowrap;
+	    .sidebar_menu {
+	    	padding: 0;
+		    > li > a {
+		        cursor: pointer;
+	            font-size: 13px;
+	            font-weight: 300;
+	            overflow: hidden;
+	            text-align: center; /* Center align the icons */
+	            text-decoration: none;
+	            color: $appbar-color;
+	            text-overflow: ellipsis;
+		    }
+	        > li.active > a {
+			    background: $appbar-active;
+	        }
+	        > li:hover > a {
+			    background: $appbar-active;
+	        }
+	    }
+	}
+}
+
+
+.editor_has_snippets_hide_backend_navbar,
+.o_home_menu_background,
+.o_fullscreen {
+	--sidebar-width: 0;
+}
+
+.editor_has_snippets_hide_backend_navbar .sidebar_panel {
+    transition: width 100ms;
+}
+.transparent-sidebar {
+                background-color: white;
+                backdrop-filter: blur(10px);
+                width: 200px; /* Adjust the width as needed */
+            }
+            .nav-item {
+                text-align: center; /* Center align the icons */
+            }
+            .nav-link {
+                display: flex;
+                justify-content: center; /* Center content horizontally */
+                align-items: center; /* Center content vertically */
+                height: 80px; /* Adjust height for better spacing */
+            }

personal_organiser/static/src/webclient/sidebar/sidebar.xml

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="personal_organiser.sidebar">
+        <div class="sidebar_panel">
+            <div class="sidebar transparent-sidebar">
+                <div class="container-fluid">
+                    <div class="row flex-nowrap">
+                        <div class="d-flex flex-column align-items-left align-items-sm-start px-3 pt-2 text-white min-vh-100">
+                            <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-left align-items-sm-start sidebar_menu" id="menu">
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link py-3 border-bottom"
+                                       title=""
+                                       t-on-click="() => this.showNewSidebar('task')">
+                                        <img src="personal_organiser/static/src/img/checklist.png" aria-label="Tasks" style="width: 26px; height: 26px;"></img>
+                                        <span class="badge bg-danger" t-if="state.todaysTasks.length > 0">
+                                            <t t-esc="state.todaysTasks.length"/>
+                                        </span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link py-3 border-bottom"
+                                       t-on-click="() => this.showNewSidebar('note')">
+                                        <img src="personal_organiser/static/src/img/note-taking.png" aria-label="Notes" style="width: 26px; height: 26px;"></img>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link py-3 border-bottom"
+                                       t-on-click="() => this.showNewSidebar('calender')">
+                                        <img src="personal_organiser/static/src/img/weekend.png" aria-label="Calender" style="width: 26px; height: 26px;"></img>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link py-3 border-bottom"
+                                       t-on-click="() => this.showNewSidebar('contacts')">
+                                        <img src="personal_organiser/static/src/img/support.png" aria-label="Contacts" style="width: 26px; height: 26px;"></img>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Task -->
+        <div class="task" id="task" style="display: none;">
+                <button t-on-click="() => this.closePanel('task')"
+                        class="btn btn-secondary mb-3 position-absolute"
+                        style="top: 10px; right: 10px;">
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                </button>
+                <div id="taskContent"><PersonalOrganizer/></div>
+        </div>
+
+        <!-- Note Maker -->
+        <div class="note" id="note" style="display: none;">
+                <button t-on-click="() => this.closePanel('note')"
+                        class="btn btn-secondary mb-3 position-absolute"
+                        style="top: 10px; right: 10px;">
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                </button>
+                <div id="noteContent"><NoteMaker/></div>
+        </div>
+
+        <!-- Contacts -->
+        <div class="contacts" id="contacts" style="display: none;">
+                <button t-on-click="() => this.closePanel('contacts')"
+                        class="btn btn-secondary mb-3 position-absolute"
+                        style="top: 10px; right: 10px;">
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                </button>
+                <div id="contactsContent"><OrgContacts/></div>
+        </div>
+
+        <!-- Calendar -->
+        <div class="calender" id="calender" style="display: none;">
+                <button t-on-click="() => this.closePanel('calender')"
+                        class="btn btn-secondary mb-3 position-absolute"
+                        style="top: 10px; right: 10px;">
+                    <i class="fa fa-times" aria-hidden="true"></i>
+                </button>
+                <div id="calenderContent">
+                     <MiniCalendar/>
+                </div>
+        </div>
+    </t>
+</templates>