ui-soxo-bootstrap-core 2.4.24

package/core/lib/pages/manage-users/manage-users.js

@@ -0,0 +1,429 @@
+import React, { useEffect, useState, useContext } from 'react'
+
+import { Tabs, Card, Space, Table, Typography, message, Button } from 'antd';
+import { Select } from 'antd';
+
+import { Modal, Form, Input } from 'antd';
+
+import { GlobalContext } from './../../Store';
+
+import FirebaseUtils from '../../../core/utils/firebase.utils';
+
+import './manage-users.scss';
+
+const { Text, Title } = Typography;
+
+const layout = {
+    labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+    },
+    wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+    },
+};
+
+const { TabPane } = Tabs;
+
+const { Option } = Select;
+
+export default function ManageUsers({ history, report, index }) {
+
+    const { user } = useContext(GlobalContext);
+
+    const [result, setResults] = useState([]);
+
+    const [visible, setVisible] = useState(false);
+
+    const [selected, setSelected] = useState({});
+
+
+    const [loading, setLoading] = useState(false);
+
+
+    const [options, setOptions] = useState({
+        page: 1,
+        current: 1,
+        pageSize: 20,
+    })
+
+    const [page, setPage] = React.useState(1);
+
+    const [location, setLocation] = useState(user.locations[0]);
+
+    const [form] = Form.useForm();
+
+
+    const columns = [{
+        title: 'Index',
+        dataIndex: 'index',
+        render: (value, item, index) => (options.page - 1) * options.pageSize + index + 1
+    },
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name'
+    },
+    {
+        title: 'Team Leader',
+        // dataIndex: 'teamLeader',
+        render: (text, row, index) => {
+            return text && text.dms && text.dms.teamLeader;
+        },
+    },
+    {
+        title: 'Phone',
+        dataIndex: 'phone',
+        // render: (text, row, index) => {
+        //     return text.phone;
+        // },
+        key: 'phone',
+    },
+    {
+        title: 'Role',
+        dataIndex: 'role',
+        key: 'role',
+    }, {
+        title: 'Locations',
+        dataIndex: 'locations',
+        key: 'locations',
+    }, {
+        title: 'Place',
+        dataIndex: 'place',
+        key: 'place',
+    },
+    {
+        title: 'Email',
+        dataIndex: 'email',
+        key: 'email',
+        // render: (text, row, index) => {
+        //     return text.name;
+        // },
+    },
+    // {
+    //     title: 'Created At',
+    //     dataIndex: 'created_at',
+    //     key: 'created_at',
+    // }, 
+
+    {
+        title: 'Action',
+        key: 'delete',
+        render: (text, record) => {
+
+            return (
+                <Space size="middle">
+                    <Button onClick={() => {
+
+                        FirebaseUtils.deleteUser(text.userId).then(() => {
+
+                            message.success('User Account Deleted');
+
+                            getUsers(location);
+
+                        })
+
+                    }} type="secondary" size={'small'}>Delete</Button>
+                </Space>
+            )
+        },
+    },
+    {
+        title: 'Action',
+        key: 'action',
+        render: (text, record) => {
+
+            return (
+                <Space size="middle">
+                    <Button onClick={() => {
+
+                        setVisible(true);
+
+                        setSelected(text);
+
+
+                        console.log(text);
+
+                    }} type="secondary" size={'small'}>Edit</Button>
+                </Space>
+            )
+        },
+    }
+    ];
+
+    useEffect(() => {
+        if (user) {
+
+            getUsers(location);
+        }
+
+    }, [user])
+
+    const loadData = (index) => {
+
+        let tab = user.locations[index];
+
+        // getBookings(tab);
+        setLocation(tab);
+
+    }
+
+    function getUsers(location) {
+
+        FirebaseUtils.getUsers(location).then((result) => {
+
+            console.log(result);
+
+            let b = Object.keys(result).map((request) => {
+                return { ...result[request], userId: request }
+            });
+
+            setResults(b);
+
+        });
+    }
+
+    /**
+ * 
+ */
+    function submitRequest() {
+
+        setLoading(true);
+
+        form
+            .validateFields()
+            .then(values => {
+
+                console.log(values);
+
+                let userContent = {
+                    name: values.name,
+                    email: values.email,
+                    place: values.place,
+                    role: values.role,
+                    phone: values.phone,
+                    locations: values.locations,
+                }
+
+                if (['tl', 'kec'].indexOf(values.role) !== -1) {
+
+                    userContent.dms = {
+                        'Consultant Name': values.consultantName,
+                        'teamLeader': values.teamLeader
+                    }
+
+                }
+
+                if (selected.userId) {
+
+                    // Create Profile With The key
+                    FirebaseUtils.updateUserInfo(selected.userId, userContent).then(() => {
+
+                        message.success('User profile updated!');
+
+                        setVisible(false);
+
+                        form.resetFields();
+
+                        getUsers(location);
+
+                    })
+
+
+                } else {
+
+                    // Create User Account
+                    FirebaseUtils.createUser({ email: values.email, password: '123456' }).then((result) => {
+
+                        console.log(result);
+
+                        setLoading(false);
+
+                        if (result.user) {
+
+                            // Create Profile With The key
+                            FirebaseUtils.addUserInfo(result.user, userContent).then(() => {
+
+                                message.success('User profile created!');
+
+                                setVisible(false);
+
+                                form.resetFields();
+
+                                getUsers(location);
+
+                            })
+
+                        } else {
+
+                            message.error('Error');
+
+                        }
+                    }).catch(info => {
+
+                        message.error('User creation failed');
+
+                        console.log('Validate Failed:', info);
+
+                        setLoading(false);
+
+                    });
+
+                }
+
+            })
+            .catch(info => {
+                console.log('Validate Failed:', info);
+
+                setLoading(false);
+
+            });
+    }
+
+
+    /**
+     * 
+     */
+    function closeModal() {
+
+        setSelected({});
+
+        setVisible(false);
+    }
+
+
+    return (
+        <div className="manage-requests">
+
+
+            <div className="page-header">
+
+                <Title level={4}>
+                    Users
+                </Title>
+                {/* <p>Import your dms file and mention the reference to upload it !</p> */}
+
+                <div>
+
+
+                    {/* <Text type="secondary">{`${result.length} records`}</Text> */}
+
+                    <Button onClick={() => {
+
+                        setVisible(true);
+
+
+                    }} type="primary" size={'small'}>Add</Button>
+                </div>
+
+            </div>
+
+
+            <Card size="small">
+                <Table
+
+                    rowKey={record => record.index}
+                    scroll={{ x: 'scroll' }}
+                    dataSource={result}
+                    columns={columns}>
+
+                    <Table.Column
+                        title="Index"
+                        key="index"
+                        render={(value, item, index) => (page - 1) * 10 + index}
+                    />
+
+                </Table>
+            </Card>
+
+
+            <Modal
+                confirmLoading={loading}
+                title="User Details"
+                visible={visible}
+                onOk={submitRequest}
+                onCancel={closeModal}>
+
+                <Form
+                    form={form}
+                    {...layout}
+                    name="new-record"
+                    layout="vertical"
+                    // onFinish={onSubmit}
+                    // validateMessages={validateMessages} 
+                    initialValues={{
+                        ...selected,
+                        userId: selected.userId
+                    }}>
+
+                    <Form.Item name={'name'} label="Name" rules={[{ required: true, message: 'Please enter Name' },]}>
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item name={'place'} label="Place" rules={[{ required: true, message: 'Please enter Place' },]}>
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item name={'phone'} label="Phone Number" rules={[{ required: true, message: 'Please enter Customer Phone Number' },]}>
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item name={'email'} label="Email" rules={[{ required: true, message: 'Please enter Email Address' },]}>
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item name={'locations'} label="Locations" rules={[{ required: true, message: 'Please enter Locations' },]}>
+                        <Select
+                            mode="multiple"
+                            allowClear
+                            style={{ width: '100%' }}
+                            placeholder="Please select"
+                            // defaultValue={['a10', 'c12']}
+                            onChange={() => { }}
+                        >
+
+                            {['pandallur'].map((location, key) => {
+
+                                return <Option value={location} key={key}>{location}</Option>
+                            })}
+
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item name={'role'} label="Role" rules={[{ required: true, message: 'Please enter role' },]}>
+
+                        <Select
+                            allowClear
+                            style={{ width: '100%' }}
+                            placeholder="Please select"
+                            // defaultValue={['a10', 'c12']}
+                            onChange={() => { }}
+                        >
+
+                            {['admin', 'manager', 'accounts'].map((role, key) => {
+
+                                return <Option value={role} key={key}>{role}</Option>
+                            })}
+
+                        </Select>
+                    </Form.Item>
+
+
+                    {/*  Applicable for KEC and Teamleader */}
+
+
+                    <Form.Item name={'consultantName'} label="Consultant Name" rules={[{ message: 'Please enter Consultant Name' },]}>
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item name={'teamLeader'} label="Team Leader Name" rules={[{ message: 'Please enter Consultant Name' },]}>
+                        <Input />
+                    </Form.Item>
+
+                </Form>
+            </Modal>
+
+        </div>
+    )
+}

package/core/lib/pages/manage-users/manage-users.scss

@@ -0,0 +1,26 @@
+
+.manage-requests{
+
+
+
+  .page-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h4{
+      text-transform: capitalize;
+      margin: 0px 0px 20px;
+    }
+
+  
+  }
+
+  .ant-card{
+    .ant-card-body{
+      padding: 0px;
+    }
+  }
+
+
+}

package/core/lib/pages/profile/profile.js

@@ -0,0 +1,247 @@
+/**
+ * Common Profile Page
+ */
+
+import React, { useState, useEffect, useContext } from 'react';
+
+import { GlobalContext } from './../../Store';
+
+import { Divider, Typography, Radio, Card } from 'antd';
+
+import './profile.scss';
+
+// Import themes from themes.json for theme configuration
+import themes from './themes.json';
+
+import { availableThemes } from './theme-config';
+
+// require basic theme images from assets for mapping themes from json
+var lightThemeBg = require('../../assets/light-theme.png');
+
+var darkThemeBg = require('../../assets/dark-theme.png');
+
+var nuraThemeBg = require('../../assets/nura-theme.png');
+
+var defaultThemeBg = require('../../assets/white-haze-theme.png');
+
+var blueSlateThemeBg = require('../../assets/blue-slate-theme.png');
+
+var whiteHazeThemeBg = require('../../assets/white-haze-theme.png');
+
+var deepPurpleThemeBg = require('../../assets/deep-purple-theme.png');
+
+const { Title, Text } = Typography;
+
+/**
+ * Profile Component for Desk
+ *
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function Profile({ children, model, history, modules = [], sidemenu = [], ...props }) {
+  const { user, state } = useContext(GlobalContext);
+
+  {
+    /* Code block for displaying and storing themes -START */
+  }
+
+  // Create a map that links the JSON image keys to actual imported images
+  const imageMap = {
+    lightTheme: lightThemeBg,
+    darkTheme: darkThemeBg,
+    nuraTheme: nuraThemeBg,
+    defaultTheme: defaultThemeBg,
+    blackSlateTheme: blueSlateThemeBg,
+    whiteHazeTheme: whiteHazeThemeBg,
+    deepPurpleTheme: deepPurpleThemeBg,
+  };
+
+  const { dispatch } = useContext(GlobalContext);
+
+  // Initialize the selectedTheme from localStorage, falling back to default
+  const [selectedTheme, setSelectedTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('selectedTheme');
+
+    return savedTheme ? JSON.parse(savedTheme).name : themes[0].name;
+  });
+
+  // Function to handle theme change
+
+  /**
+   *
+   *
+   * @param {'*'} themeName
+   */
+  const handleThemeChange = (themeName) => {
+    const theme = themes.find((t) => t.name === themeName);
+
+    if (theme) {
+      // Dispatch theme colors to global state
+      dispatch({
+        type: 'appTheme',
+        payload: theme,
+      });
+
+      // Save selected theme to localStorage
+      localStorage.setItem('selectedTheme', JSON.stringify(theme));
+    }
+  };
+
+  /**
+   * Setting the theme on select of radio buttons
+   *
+   * @param {*} e
+   */
+  const onChange = (e) => {
+    const themeName = e.target.value;
+
+    //set the selected theme using useState
+    setSelectedTheme(themeName);
+
+    handleThemeChange(themeName);
+  };
+
+  // Apply the theme from localStorage on component mount
+  useEffect(() => {
+    // Apply the initial theme from localStorage on load
+    handleThemeChange(selectedTheme);
+  }, []); // Empty dependency array ensures this runs once on mount
+
+  return (
+    <>
+      <Card className="profile" style={{ background: state.theme.colors.colorTableBg }}>
+        <Divider></Divider>
+
+        <div className="profile-headline">
+          <Title level={3} style={{ color: state.theme.colors.colorText }}>
+            {user.name}
+          </Title>
+        </div>
+
+        <Divider></Divider>
+
+        {/* <p className="page-desc">{loader ? '. Loading data' : ``}</p> */}
+
+        <div className="section-content">
+          <div className="section-row">
+            <div className="section-label">
+              <Text type="secondary" style={{ color: state.theme.colors.colorText }}>
+                Name
+              </Text>
+            </div>
+            <div className="section-value" style={{ color: state.theme.colors.colorText }}>
+              <strong>{user.name}</strong>
+            </div>
+          </div>
+
+          <div className="section-row">
+            <div className="section-label">
+              <Text type="secondary" style={{ color: state.theme.colors.colorText }}>
+                Role
+              </Text>
+            </div>
+            <div className="section-value" style={{ color: state.theme.colors.colorText }}>
+              <strong>{user.role && user.role.name}</strong>
+            </div>
+          </div>
+
+          <div className="section-row">
+            <div className="section-label">
+              <Text type="secondary" style={{ color: state.theme.colors.colorText }}>
+                Phone
+              </Text>
+            </div>
+            <div className="section-value" style={{ color: state.theme.colors.colorText }}>
+              <strong>{user.phone}</strong>
+            </div>
+          </div>
+
+          <div className="section-row">
+            <div className="section-label">
+              <Text type="secondary" style={{ color: state.theme.colors.colorText }}>
+                Email
+              </Text>
+            </div>
+            <div className="section-value" style={{ color: state.theme.colors.colorText }}>
+              <strong>{user.email}</strong>
+            </div>
+          </div>
+
+          {/* <div className="section-row">
+                    <div className="section-label">
+                        <Text type="secondary">Role</Text>
+                    </div>
+                    <div className="section-value">
+                        <strong>{user.role.name}</strong>
+                    </div>
+                </div>  */}
+          {/* <div className="section-row">
+                    <div className="section-label">
+                        <Text type="secondary">Location</Text>
+                    </div>
+                    <div className="section-value">
+                        <div className="locations">
+                            {user.locations.map((loc, key) => (
+                                <Tag color="blue" key={key}>
+                                    {loc}
+                                </Tag>
+                            ))}
+                        </div>
+                    </div>
+                </div> */}
+
+          {/* <div className="section-row">
+                    <div className="section-label">
+                        <Text type="secondary">Location</Text>
+                    </div>
+                    <div className="section-value">
+                        <div className="locations">
+                        </div>
+                    </div>
+                </div>  */}
+
+          {/* <div className="section-row">
+                     <div className="section-label">
+                         <Text type="secondary">Subscribe for Notifications</Text>
+                     </div>
+                     <div className="section-value">
+                         <strong><Switch checkedChildren="Yes" unCheckedChildren="No" /></strong>
+                     </div>
+                 </div> */}
+        </div>
+
+        {/* Code block for displaying themes - START */}
+
+        <div className="theme-section">
+          <Radio.Group className="theme-radio-group" onChange={onChange} value={selectedTheme}>
+            <div className="theme-container">
+              {availableThemes?.map((theme) => (
+                <div key={theme.name} className="radio-button-wrapper">
+                  <Radio.Button value={theme.name} className="radio-button">
+                    <Card
+                      className={`theme-card ${selectedTheme === theme.name ? 'selected' : ''}`}
+                      hoverable
+                      cover={<img alt={theme.caption} src={imageMap[theme.image]} />}
+                    >
+                      <div className="caption-name">
+                        <div className="theme-name">{theme.caption}</div>
+                        <div className="custom-radio">
+                          <div className={`radio-circle ${selectedTheme === theme.name ? 'checked' : ''}`}>
+                            {selectedTheme === theme.name ? '✓' : ''}
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+                  </Radio.Button>
+                </div>
+              ))}
+            </div>
+          </Radio.Group>
+        </div>
+
+        {/* Code block for displaying themes -END */}
+      </Card>
+    </>
+  );
+}