ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/approval-form/approval-form.js

@@ -0,0 +1,280 @@
+import React, { useEffect, useState, Fragment, useContext } from 'react';
+
+import { Tag, Skeleton, Row, message, Alert, Image } from 'antd';
+
+import { Link } from 'react-router-dom';
+
+import FirebaseUtils from './../../utils/firebase.utils';
+
+import { GlobalContext } from './../../Store';
+
+import RequestForm from './../../components/request-form/request-form';
+
+// import BaseForm from './../../components/base';
+
+import './approval-form.scss';
+
+const layout = {
+    labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+    },
+    wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+    },
+};
+
+export default function ApprovalForm({ props, step, match, history }) {
+    const [reports, setReports] = useState([]);
+
+    const { user } = useContext(GlobalContext);
+
+    const { params } = match;
+
+    const { id, city } = params;
+
+    const [loader, setLoader] = useState(true);
+
+    useEffect(() => {
+        if (step.endpoint === 'cancellations') {
+            FirebaseUtils.getBaseRecord(id, step.model).then((result) => {
+                var request = result;
+
+                console.log(result);
+
+                setReports({ ...request });
+
+                setLoader(false);
+            });
+        } else {
+            FirebaseUtils.getRequest(id).then((result) => {
+                var request = result;
+
+                console.log(result);
+
+                setReports({ ...request });
+
+                setLoader(false);
+            });
+        }
+    }, []);
+
+    return (
+        <div className="reports">
+            {loader ? (
+                <Skeleton type="report" />
+            ) : (
+                <Fragment>
+                    {step.endpoint === 'cancellations' ? (
+                        <>
+                            <div className="vehicle-card">
+                                <div className="about-us page-content">
+                                    <h1 className="page-heading">Cancel {reports.type}</h1>
+                                </div>
+                                <p>Update any necessary information and see the status of your allocation below</p>
+                                <div gutter={0} className="detail-wrapper">
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <Row span={12}>
+                                                <h3>Customer Name </h3>
+                                            </Row>
+                                        </Row>
+                                        <Row span={12}>
+                                            <h2 className="title amount">{reports.customerName}</h2>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Email :</h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span className="">{reports.email}</span>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Booking No </h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <a href={`/${city}/bookings/${reports.bookingId}`}>{reports.bookingId}</a>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Dealer Code :</h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span className="">{reports.dealerCode}</span>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Phone No :</h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span className="">{reports.phone}</span>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Attachments :</h3>
+                                        </Row>
+                                        <>
+                                            {reports.cancellation_request &&
+                                                reports.cancellation_request.map((file) => {
+                                                    return (
+                                                        <>
+                                                            {file.type === 'application/pdf' ? (
+                                                                <embed src={file.url} width="500" height="375" type="application/pdf" />
+                                                            ) : (
+                                                                <Image width={200} src={file.url} />
+                                                            )}
+                                                        </>
+                                                    );
+                                                })}
+                                        </>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Reason :</h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span className="">{reports.reason}</span>
+                                        </Row>
+                                    </div>
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Remarks :</h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span className="">{reports.remarks}</span>
+                                        </Row>
+                                    </div>
+                                    {reports.sm_remarks ? (
+                                        <div className="detail-element">
+                                            <Row span={12}>
+                                                <h3>Remarks from SM :</h3>
+                                            </Row>
+                                            <Row span={12}>
+                                                <span className="">{reports.sm_remarks}</span>
+                                            </Row>
+                                        </div>
+                                    ) : null}
+                                    {reports.ccm_remarks ? (
+                                        <div className="detail-element">
+                                            <Row span={12}>
+                                                <h3>Remarks from CCM :</h3>
+                                            </Row>
+                                            <Row span={12}>
+                                                <span className="">{reports.ccm_remarks}</span>
+                                            </Row>
+                                        </div>
+                                    ) : null}
+                                    <div className="detail-element">
+                                        <Row span={12}>
+                                            <h3>Status </h3>
+                                        </Row>
+                                        <Row span={12}>
+                                            <span>{reports.status}</span>
+                                        </Row>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* <BaseForm
+                                index={id}
+                                formContent={reports}
+                                modelIndex="id"
+                                model={step.model}
+                                step={step}
+                                callback={(params, values) => {
+                                    history.goBack();
+                                }}
+                            /> */}
+                        </>
+                    ) : (
+                        <>
+                            <div className="about-us page-content">
+                                <h1 className="page-heading">Customer Payment</h1>
+                                <p>Please provide the customer id and receipt details after entering into dms</p>
+                            </div>
+                            <div gutter={0} className="detail-wrapper">
+                                <Tag color="purple">{reports.status}</Tag>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <Row span={12}>
+                                            <h3>Customer </h3>
+                                        </Row>
+                                    </Row>
+                                    <Row span={12}>
+                                        <h2 className="title amount">{reports.customer.customerName} </h2>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Phone </h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span>{reports.customer.phone}</span>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Remarks </h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span>{reports.customer.remarks}</span>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Variant </h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span>{reports.variant}</span>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Color</h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span>{reports.color}</span>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Consultant :</h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span className="">{reports.kec}</span>
+                                    </Row>
+                                </div>
+                                <div className="detail-element">
+                                    <Row span={12}>
+                                        <h3>Team Leader :</h3>
+                                    </Row>
+                                    <Row span={12}>
+                                        <span className="">{reports.teamLeader}</span>
+                                    </Row>
+                                </div>
+                                <Link to={`/requests/${reports.id}`}>View Request</Link>
+                            </div>
+                            <Alert message="Approval Request" description={`Please provide approval for the request`} type="info" />
+
+                            <RequestForm
+                                formContent={reports}
+                                modelIndex="requestId"
+                                model={step.model}
+                                step={step}
+                                callback={(params, values) => {
+                                    history.goBack();
+                                }}
+                            />
+                        </>
+                    )}
+                </Fragment>
+            )}
+        </div>
+    );
+}

package/core/lib/components/approval-form/approval-form.scss

@@ -0,0 +1,184 @@
+.reports {
+    // display: flex;
+    // margin-top: 20px;
+    .scanner{
+        // min-height: 220px;
+        video{
+            height: 220px
+        }
+        div{
+            box-shadow: rgba(255, 0, 0, 0.5) 0px 0px 0px 1px inset!important;
+        }
+    }
+    .welcome{
+        box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+        padding: 15px;
+        border: 1px solid #dedede;
+    }
+
+    .detail-element{
+        margin: 10px 0px;
+    }
+
+    .report-summary{
+        display: flex;
+        flex-direction: column;
+        .report-card{
+            display: flex;
+            font-size: 14px;
+            justify-content: space-between;
+            padding: 6px 0px;
+            .report-item{
+
+            }
+        }
+    }
+
+    .intro {
+        
+        .first-line {
+            box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+
+            display: flex;
+            align-items: baseline;
+
+            p {
+                margin: 0px 10px;
+                font-size: 20px;
+            }
+          
+        }
+
+        h1.welcome {
+            margin-top: 50px;
+            font-size: 50px;
+            color: #463737;
+        }
+
+        @media only screen and (min-width: 600px) {
+            // display: flex;
+
+            // justify-content: flex-start;
+
+            h1.second-line {
+                color: #7d7d7d;
+                font-size: 70px;
+            }
+        }
+
+
+    }
+
+
+    .top-gallery {
+        margin: 50px 0px;
+
+        .card {
+            padding: 25px 15px;
+            box-shadow: 0px 0px 10px 10px #e2e2e2;
+
+            
+        }
+
+        .carousel {
+            .carousel-item {
+                img {
+                    width: 100%;
+                }
+
+                .carousel-caption {
+                    h3 {
+                        text-align: left;
+                    }
+
+                    p {
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    }
+    .locations-wrapper{
+        padding: 15px 10px 10px;
+        margin-bottom: 0px;
+        .ant-steps{
+            .ant-steps-item{
+                padding-bottom: 10px;
+                &:last-child{
+                    padding-bottom: 0;
+                }
+                .step-progress{
+                    font-weight: 600;
+                    color: #000;
+                    ul{
+                        padding: 0;
+                        margin: 10px 0;
+                        list-style: none;
+                        li{
+                            display: inline-block;
+                            margin-bottom: 5px;
+                            margin-right: 10px;
+                            p{
+                                margin-bottom: 0;
+                                font-weight: 400;
+                                span{
+                                    margin-left: 3px;
+                                    font-weight: 600;
+                                }
+                            }
+                            &:last-child{
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.scan{
+            .loader-wrapper{
+                position: absolute;
+                top: 0;
+                left: 43%;
+            }
+            section{
+                opacity: 0.4;
+            }
+        }
+    }
+    .alert-wrapper{
+        margin-bottom: 16px;
+        transition: all 0.5s ease;
+    }
+    .detail-wrapper{   
+        margin-bottom: 16px; 
+        box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05); //7.009px 7.009px 5.006px rgba(175,194,203,.251)
+        border-radius: 3px;
+        padding: 15px 15px 8px;
+        h3{
+            font-weight: 700;
+            font-size: 14px;
+            color: #000;
+            span{
+                font-weight:400;
+                margin-left: 5px;
+                &.event{
+                    font-weight: 600;
+                }
+            }
+        }
+        p{
+            font-size: 16px;
+            font-weight: 700;
+            color: #000;
+        }
+        .ant-ag{
+            font-size: 14px;
+            padding: 2px 10px;
+        }
+    }
+    .page-content{
+        .page-heading{
+            font-size: 20px;
+        }
+    }
+}

package/core/lib/components/approval-list/approval-list.js

@@ -0,0 +1,143 @@
+
+import React, { useState, useEffect, useContext } from "react";
+
+import { Link } from 'react-router-dom'
+
+import { GlobalContext } from '../../../lib/Store';
+
+import { Row, Tabs, Button, Skeleton, Typography } from "antd";
+
+
+import FirebaseUtils from '../../../lib/utils/firebase.utils';
+
+
+import "./approval-list.scss";
+
+const { TabPane } = Tabs;
+
+const { Title } = Typography;
+
+
+export default function ApprovalList({ step, redirect }) {
+
+    const { user } = useContext(GlobalContext);
+
+    useEffect(() => {
+
+
+    }, [])
+
+    return (
+        <div className="approval-list">
+
+
+            <Title level={3}>
+
+                {step.caption}
+
+            </Title>
+
+
+            <Tabs defaultActiveKey="0">
+
+                {
+                    user.locations.map((location, index) => {
+
+                        return (
+                            <TabPane tab={`${location} Files`} key={index}>
+
+                                <RequestList step={step} location={location} redirect={redirect} />
+
+                            </TabPane>
+                        )
+                    })
+                }
+
+            </Tabs>
+
+        </div>
+    );
+}
+
+
+
+
+
+function RequestList({ step, location, redirect }) {
+
+    const { user } = useContext(GlobalContext);
+
+    const [reports, setReports] = useState([]);
+
+    const [loader, setLoader] = useState(true);
+
+    function getData(filter) {
+
+        setLoader(true);
+
+        var queries = [];
+
+        if (typeof step.queries === 'function') {
+            queries = step.queries({ user, location });
+        } else {
+            queries = step.queries;
+        }
+
+        if (step.model == 'cancellations') {
+            FirebaseUtils.getRecords(location, queries, step.model || 'requests').then((vehicles) => {
+
+                setLoader(false);
+
+                console.log(vehicles);
+
+                setReports(vehicles[step.model || 'requests']);
+
+            });
+        } else {
+            FirebaseUtils.getRequests(location, queries).then((vehicles) => {
+
+                setLoader(false);
+
+                console.log(vehicles);
+
+                setReports(vehicles.requests);
+
+            });
+        }
+
+    }
+
+
+    useEffect(() => {
+
+        getData();
+
+    }, [])
+
+
+    return (<><div className="list-header">
+
+        <p className="page-desc">
+            {loader ? 'Loading data' : `Found ${reports.length} results`}
+        </p>
+        <Button onClick={getData} type="secondary" size={'small'}>Refresh</Button>
+
+    </div>
+
+        <Row className="report-listing-wrapper">
+            {
+                loader ? (
+                    <Skeleton type="listing" />
+                )
+                    :
+                    (
+                        <>
+                            {
+                                reports.map((report, index) => <step.Card step={step} redirect={redirect} request={report} index={index} key={index} />)
+                            }
+                        </>
+                    )}
+        </Row></>)
+
+}
+

package/core/lib/components/approval-list/approval-list.scss

@@ -0,0 +1,3 @@
+.approval-list{
+    padding: 0px 10px;
+}

package/core/lib/components/approval-list/components/request-card/request-card.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import { Tag } from 'antd'
+
+import './request-card.scss';
+
+export default function RequestCard({ request, index }) {
+
+    return (
+        <Link className="request-card" to={`approval/${request.city}/${request.id}`}>
+            <div className="card">
+
+                <h2 className="title amount ">
+                    {request.customer.customerName}
+
+                </h2>
+                <h4 className="title">
+                    {request.customer.phone}
+                </h4>
+
+
+                <h3 className="title ">
+                    {request.variant} , {request.city}
+                </h3>
+
+                <h4>
+                    {request.color}
+                </h4>
+
+                <p className="address">
+                    {request.customer.remarks}
+                    {/* <Tag color="magenta">{request.status || 'Initial'}</Tag> */}
+                </p>
+
+
+                Created at {request.created_at}
+
+
+            </div>
+        </Link>
+    )
+}

package/core/lib/components/approval-list/components/request-card/request-card.scss

@@ -0,0 +1,31 @@
+.request-card {
+    width: 100%;
+    .card {
+      padding: 20px;
+      box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+      margin: 15px 0px;
+      border: 1px solid #efefef;
+      color: #49535d;
+      &:first-child {
+        margin-top: 0;
+      }
+      
+      .address {
+        font-size: 14px;
+        margin-bottom: 0px;
+        line-height: 16px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .report-info {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li {
+          display: inline-block;
+          width: 50%;
+          padding: 5px 0;
+        }
+      }
+    }
+  }