first commit
This commit is contained in:
Kenneth Jannette
248
src/Components/Dashboard/Dashboard.js
Normal file
248
src/Components/Dashboard/Dashboard.js
Normal file
@@ -0,0 +1,248 @@
|
||||
import React, { useState, useContext, useEffect } from "react";
|
||||
import { CaseCard } from "../../pageElements/Cards.js";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
ArrowRight,
|
||||
Activity,
|
||||
FileEarmarkText,
|
||||
Pencil,
|
||||
Clock,
|
||||
} from "react-bootstrap-icons";
|
||||
import { db } from "../../firebase.js";
|
||||
import { collection, onSnapshot, query, where } from "firebase/firestore";
|
||||
import { Typeahead } from "react-bootstrap-typeahead";
|
||||
import { AppContext } from "../../Hooks/useContext/appContext.js";
|
||||
import UploadModal from "../Modals/UploadModal.js";
|
||||
import Button from "react-bootstrap/Button";
|
||||
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const [allCases, setAllCases] = useState(null);
|
||||
const [selectedCase, setSelectedCase] = useState(null);
|
||||
const [showModal, setShowModal] = useState();
|
||||
const [docCount, setDocCount] = useState();
|
||||
const [responseCount, setResponseCount] = useState();
|
||||
const { appState } = useContext(AppContext);
|
||||
const { group } = appState;
|
||||
const appUserId = group ? group.appUserId : null;
|
||||
|
||||
function getCases() {
|
||||
if (!appUserId) {
|
||||
setAllCases([]);
|
||||
return;
|
||||
}
|
||||
const q = query(collection(db, "cases"), where("ownerId", "==", appUserId));
|
||||
const unsub = onSnapshot(q, (snapshot) => {
|
||||
const data = snapshot.docs.map((doc) => doc.data());
|
||||
data.sort((a, b) => {
|
||||
return a.filedDate < b.filedDate ? 1 : -1;
|
||||
});
|
||||
setAllCases(data);
|
||||
});
|
||||
return unsub;
|
||||
}
|
||||
|
||||
function getStats() {
|
||||
if (!appUserId) {
|
||||
return;
|
||||
}
|
||||
const q = query(
|
||||
collection(db, "documents"),
|
||||
where("ownerId", "==", appUserId)
|
||||
);
|
||||
const unsub = onSnapshot(q, (snapshot) => {
|
||||
const data = snapshot.docs.map((doc) => doc.data());
|
||||
if (data) {
|
||||
setDocCount(data?.length);
|
||||
const respCount = data?.reduce(function (acc, obj) {
|
||||
return acc + obj.responseGenerations;
|
||||
}, 0);
|
||||
setResponseCount(respCount);
|
||||
}
|
||||
});
|
||||
return unsub;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!appUserId) {
|
||||
return;
|
||||
}
|
||||
const unsubCases = getCases();
|
||||
const unsubStats = getStats();
|
||||
return () => {
|
||||
typeof unsubCases !== "undefined" && unsubCases();
|
||||
typeof unsubStats !== "undefined" && unsubStats();
|
||||
};
|
||||
}, [appUserId]);
|
||||
|
||||
const handleViewClick = (caseId) => {
|
||||
navigate(`/casedetails/${caseId}`);
|
||||
};
|
||||
|
||||
if (!group) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dashboard-header">
|
||||
<h2 className="doc-header-text">
|
||||
{!!(group.firstName && group.lastName) ? (
|
||||
<span>
|
||||
{group.firstName} {group.lastName}
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</h2>
|
||||
<div className="user-name-container2">{group.firm}</div>
|
||||
</div>
|
||||
<div className="app-divider dash-divider" />
|
||||
<div className="stats-container">
|
||||
<div className="stats-row-box">
|
||||
<div className="stats-unit-wrapper">
|
||||
<div className="stats-icon-wrapper">
|
||||
<Activity style={{ color: "#f27300" }} />
|
||||
</div>
|
||||
{allCases?.length >= 1 ? (
|
||||
<div>
|
||||
<p className="stats-text">
|
||||
{allCases?.length === 1
|
||||
? `${allCases?.length} active case`
|
||||
: `${allCases?.length} active cases`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="stats-text">
|
||||
{allCases?.length} active cases - Click on the "Cases" tab,
|
||||
above, and create a case to get started.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="stats-unit-wrapper">
|
||||
{allCases?.length >= 1 ? (
|
||||
<>
|
||||
<div className="stats-icon-wrapper">
|
||||
<FileEarmarkText style={{ color: "#6da8dc" }} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="stats-text">
|
||||
{docCount === 1
|
||||
? `${docCount} document uploaded`
|
||||
: `${docCount} documents uploaded`}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="stats-unit-wrapper">
|
||||
{responseCount > 0 ? (
|
||||
<>
|
||||
<div className="stats-icon-wrapper">
|
||||
<Pencil style={{ color: "#767676" }} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="stats-text">
|
||||
{responseCount}
|
||||
{responseCount < 2
|
||||
? " response Novodrafted"
|
||||
: " responses Novodrafted"}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="stats-unit-wrapper">
|
||||
{responseCount > 0 ? (
|
||||
<>
|
||||
<div className="stats-icon-wrapper">
|
||||
<Clock style={{ color: "#f27300" }} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="stats-text">
|
||||
{Math.round(responseCount * 3.2989 * 100) / 100} hours saved
|
||||
using Novodraft
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{allCases === null ? <div>Loading...</div> : null}
|
||||
{allCases !== null ? (
|
||||
<div>
|
||||
<div className="dashboard-filter mb-3">
|
||||
<Typeahead
|
||||
className="flex-grow-1"
|
||||
id="case-search"
|
||||
labelKey="caseNumber"
|
||||
options={allCases}
|
||||
minLength={1}
|
||||
placeholder="Search by Case Number"
|
||||
onChange={(selected) => {
|
||||
let item = null;
|
||||
for (const currentItem of selected) {
|
||||
item = { ...currentItem };
|
||||
}
|
||||
setSelectedCase(item);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
disabled={selectedCase === null}
|
||||
onClick={() => handleViewClick(selectedCase?.caseId)}
|
||||
>
|
||||
View Case
|
||||
</Button>
|
||||
<Button
|
||||
disabled={selectedCase === null}
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
Express Document Upload
|
||||
</Button>
|
||||
</div>
|
||||
{allCases.slice(0, 3).map((c, i) => (
|
||||
<CaseCard
|
||||
key={`linkcard-${i}`}
|
||||
caption={c.caption}
|
||||
captionTwo={c.captionTwo}
|
||||
jurisdiction={c.jurisdiction}
|
||||
caseNumber={`Index no. ${c.caseNumber}`}
|
||||
filedDate={c.filedDate}
|
||||
caseId={c.caseId}
|
||||
labelText="View"
|
||||
onClick={handleViewClick}
|
||||
/>
|
||||
))}
|
||||
{allCases?.length > 3 ? (
|
||||
<div className="view-all-link-box mb-3">
|
||||
<div className="view-all-wrapper">
|
||||
<Link className="view-all-link" to="/cases">
|
||||
View All{" "}
|
||||
<span className="arrow-wrapper">
|
||||
<ArrowRight />
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
{showModal && selectedCase !== null ? (
|
||||
<UploadModal setShowModal={setShowModal} caseData={selectedCase} />
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
Reference in New Issue
Block a user