-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: made scorecard component reusable and added the scorecard fi…
…eld to the overview table, added scorecard prioritization table in dashboard
- Loading branch information
onehanddev
committed
Dec 6, 2024
1 parent
6ea26fc
commit d7f1f70
Showing
7 changed files
with
200 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| interface ScoreIndicatorProps { | ||
| score: "high" | "medium" | "low"; | ||
| className?: string; | ||
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| export const ScoreIndicator = ({ score, children, className = "" }: ScoreIndicatorProps) => { | ||
| const bgColorClass = { | ||
| high: "bg-high", | ||
| medium: "bg-medium", | ||
| low: "bg-low", | ||
| }[score]; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`flex h-10 items-center justify-center font-medium text-deep-ocean capitalize ${bgColorClass} ${className}`} | ||
| > | ||
| {children ? children : score} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
153 changes: 94 additions & 59 deletions
153
client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,96 @@ | ||
| // import { ProjectType } from "@shared/contracts/projects.contract"; | ||
| // import { createColumnHelper } from "@tanstack/react-table"; | ||
| // const columnHelper = createColumnHelper< | ||
| // Partial<Project> & { | ||
| // // ! these types should be part of the Project entity eventually, we are adding them here to silent TS for now | ||
| // // financialFeasibility: number; | ||
| // // legalFeasibility: number; | ||
| // // implementationFeasibility: number; | ||
| // // socialFeasibility: number; | ||
| // // securityRating: number; | ||
| // // availabilityOfExperiencedLabor: number; | ||
| // // availabilityOfAlternatingFunding: number; | ||
| // // coastalProtectionBenefit: number; | ||
| // // biodiversityBenefit: number; | ||
| // } | ||
| // >(); | ||
| import { createColumnHelper } from "@tanstack/react-table"; | ||
| import { ScoreIndicator } from "@/components/ui/score-card"; | ||
| import { ProjectScorecard } from "@shared/entities/project-scorecard.entity"; | ||
|
|
||
| export const TABLE_COLUMNS = []; | ||
| const columnHelper = createColumnHelper< | ||
| Partial<ProjectScorecard> & { | ||
| financialFeasibility: number; | ||
| legalFeasibility: number; | ||
| implementationFeasibility: number; | ||
| socialFeasibility: number; | ||
| securityRating: number; | ||
| availabilityOfExperiencedLabor: number; | ||
| availabilityOfAlternatingFunding: number; | ||
| coastalProtectionBenefit: number; | ||
| biodiversityBenefit: number; | ||
| } | ||
| >(); | ||
|
|
||
| // export const TABLE_COLUMNS = [ | ||
| // columnHelper.accessor("projectName", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Project Name</span>, | ||
| // }), | ||
| // columnHelper.accessor("financialFeasibility", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Financial feasibility</span>, | ||
| // }), | ||
| // columnHelper.accessor("legalFeasibility", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Legal Feasibility</span>, | ||
| // }), | ||
| // columnHelper.accessor("implementationFeasibility", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Implementation feasibility</span>, | ||
| // }), | ||
| // columnHelper.accessor("socialFeasibility", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Social Feasibility</span>, | ||
| // }), | ||
| // columnHelper.accessor("securityRating", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Security Rating</span>, | ||
| // }), | ||
| // columnHelper.accessor("availabilityOfExperiencedLabor", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Availability of experienced labor</span>, | ||
| // }), | ||
| // columnHelper.accessor("availabilityOfAlternatingFunding", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Availability of alternating funding</span>, | ||
| // }), | ||
| // columnHelper.accessor("coastalProtectionBenefit", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Coastal Protection benefit</span>, | ||
| // }), | ||
| // columnHelper.accessor("biodiversityBenefit", { | ||
| // enableSorting: true, | ||
| // header: () => <span>Biodiversity benefit</span>, | ||
| // }), | ||
| // ]; | ||
| export const TABLE_COLUMNS = [ | ||
| columnHelper.accessor("projectName", { | ||
| enableSorting: true, | ||
| header: () => <span>Project Name</span>, | ||
| }), | ||
| columnHelper.accessor("financialFeasibility", { | ||
| enableSorting: true, | ||
| header: () => <span>Financial feasibility</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("legalFeasibility", { | ||
| enableSorting: true, | ||
| header: () => <span>Legal Feasibility</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("implementationFeasibility", { | ||
| enableSorting: true, | ||
| header: () => <span>Implementation feasibility</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("socialFeasibility", { | ||
| enableSorting: true, | ||
| header: () => <span>Social Feasibility</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("securityRating", { | ||
| enableSorting: true, | ||
| header: () => <span>Security Rating</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("availabilityOfExperiencedLabor", { | ||
| enableSorting: true, | ||
| header: () => <span>Availability of experienced labor</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("availabilityOfAlternatingFunding", { | ||
| enableSorting: true, | ||
| header: () => <span>Availability of alternating funding</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("coastalProtectionBenefit", { | ||
| enableSorting: true, | ||
| header: () => <span>Coastal Protection benefit</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| columnHelper.accessor("biodiversityBenefit", { | ||
| enableSorting: true, | ||
| header: () => <span>Biodiversity benefit</span>, | ||
| cell: (props) => { | ||
| const value = props.getValue(); | ||
| return <ScoreIndicator score={value as "high" | "medium" | "low"} />; | ||
| }, | ||
| }), | ||
| ]; |
Oops, something went wrong.