mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-03 19:40:16 -04:00
Merge branch 'admin-GEN-57-all-together-now' into backend-frontend-integration
This commit is contained in:
pmoharana-cmd
commit
b0ced6ef9f
BIN
.DS_Store → backend/.DS_Store
vendored
BIN
.DS_Store → backend/.DS_Store
vendored
Binary file not shown.
42
compass/app/admin/layout.tsx
Normal file
42
compass/app/admin/layout.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
|
||||
import Sidebar from "@/components/resource/Sidebar";
|
||||
import React, { useState } from "react";
|
||||
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex-row">
|
||||
{/* button to open sidebar */}
|
||||
<button
|
||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||
className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
|
||||
aria-label={"Open sidebar"}
|
||||
>
|
||||
{
|
||||
!isSidebarOpen && (
|
||||
<ChevronDoubleRightIcon className="h-5 w-5" />
|
||||
) // Icon for closing the sidebar
|
||||
}
|
||||
</button>
|
||||
{/* sidebar */}
|
||||
<div
|
||||
className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} w-64 transition duration-300 ease-in-out`}
|
||||
>
|
||||
<Sidebar setIsSidebarOpen={setIsSidebarOpen} />
|
||||
</div>
|
||||
{/* page ui */}
|
||||
<div
|
||||
className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? "ml-64" : "ml-0"}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
compass/app/admin/page.tsx
Normal file
17
compass/app/admin/page.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
"use client";
|
||||
|
||||
import { PageLayout } from "@/components/PageLayout";
|
||||
import { Table } from "@/components/Table/Index";
|
||||
|
||||
import { UsersIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* icon + title */}
|
||||
<PageLayout title="Users" icon={<UsersIcon />}>
|
||||
<Table />
|
||||
</PageLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
// pages/index.tsx
|
||||
"use client";
|
||||
|
||||
import Button from "@/components/Button";
|
||||
import Input from "@/components/Input";
|
||||
import InlineLink from "@/components/InlineLink";
|
||||
import Paper from "@/components/auth/Paper";
|
||||
// import { Metadata } from 'next'
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
|
||||
// export const metadata: Metadata = {
|
||||
// title: 'Login',
|
||||
// }
|
||||
|
||||
export default function Page() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const testFetch = async () => {
|
||||
const apiEndpoint = `${process.env.NEXT_PUBLIC_HOST}/api/health`;
|
||||
|
||||
const result = await fetch(apiEndpoint);
|
||||
|
||||
if (result.status != 200) {
|
||||
console.log(`Error has occurred when accessing ${apiEndpoint}`);
|
||||
}
|
||||
|
||||
console.log(await result.json());
|
||||
};
|
||||
|
||||
testFetch();
|
||||
|
||||
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEmail(event.currentTarget.value);
|
||||
console.log("email " + email);
|
||||
};
|
||||
|
||||
const handlePasswordChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setPassword(event.currentTarget.value);
|
||||
console.log("password " + password);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
// Priority: Incorrect combo > Missing email > Missing password
|
||||
|
||||
if (password.trim().length === 0) {
|
||||
setError("Please enter your password.");
|
||||
}
|
||||
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
|
||||
if (email.trim().length === 0) {
|
||||
setError("Please enter your email.");
|
||||
}
|
||||
// Placeholder for incorrect email + password combo.
|
||||
if (email === "incorrect@gmail.com" && password) {
|
||||
setError("Incorrect password.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper>
|
||||
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="Compass Center logo."
|
||||
width={100}
|
||||
height={91}
|
||||
/>
|
||||
<h1 className="font-bold text-xl text-purple-800">Login</h1>
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
type="email"
|
||||
title="Email"
|
||||
placeholder="janedoe@gmail.com"
|
||||
onChange={handleEmailChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<Input
|
||||
type="password"
|
||||
title="Password"
|
||||
onChange={handlePasswordChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-left space-y-4">
|
||||
<InlineLink href="/forgot_password">
|
||||
Forgot password?
|
||||
</InlineLink>
|
||||
<Button onClick={handleClick}>Login</Button>
|
||||
<div
|
||||
className="text-center text-red-600"
|
||||
hidden={!error}
|
||||
>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p className="text-center mt-6 text-gray-500 text-xs">
|
||||
© 2024 Compass Center
|
||||
</p>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ export default function Page() {
|
|||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* icon + title */}
|
||||
<div className="pt-16 px-8 pb-4 flex-grow">
|
||||
<div className="pt-16 px-8 pb-4 flex-row">
|
||||
<div className="mb-4 flex items-center space-x-4">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,11 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
disabled,
|
||||
onClick,
|
||||
}) => {
|
||||
const buttonClassName = `inline-block rounded border ${disabled ? "bg-gray-400 text-gray-600 cursor-not-allowed" : "border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"} px-4 py-1 text-md font-semibold w-20 h-10 text-center`;
|
||||
const buttonClassName = `inline-block rounded border ${
|
||||
disabled
|
||||
? "bg-gray-400 text-gray-600 cursor-not-allowed"
|
||||
: "border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"
|
||||
} px-4 py-1 text-md font-semibold w-20 h-10 text-center`;
|
||||
|
||||
return (
|
||||
<button
|
||||
|
|
|
|||
53
compass/components/FilterBox/ContainsDropdown.tsx
Normal file
53
compass/components/FilterBox/ContainsDropdown.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { useState } from "react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
const mockTags = ["food relief", "period poverty", "nutrition education"];
|
||||
|
||||
type FilterType = "contains" | "does not contain" | "is empty" | "is not empty";
|
||||
|
||||
export const ContainsDropdown = ({
|
||||
isDropdownOpen,
|
||||
setIsDropdownOpen,
|
||||
filterType,
|
||||
setFilterType,
|
||||
}) => {
|
||||
const handleFilterTypeChange = (type: FilterType) => {
|
||||
setFilterType(type);
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`absolute z-10 mt-8 -top-28 bg-white border border-gray-300 rounded-md shadow-md p-2 ${
|
||||
isDropdownOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-gray-100 rounded"
|
||||
onClick={() => handleFilterTypeChange("contains")}
|
||||
>
|
||||
Contains
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-gray-100 rounded"
|
||||
onClick={() => handleFilterTypeChange("does not contain")}
|
||||
>
|
||||
Does not contain
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-gray-100 rounded"
|
||||
onClick={() => handleFilterTypeChange("is empty")}
|
||||
>
|
||||
Is empty
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:bg-gray-100 rounded"
|
||||
onClick={() => handleFilterTypeChange("is not empty")}
|
||||
>
|
||||
Is not empty
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
95
compass/components/FilterBox/index.tsx
Normal file
95
compass/components/FilterBox/index.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
// FilterBox.tsx
|
||||
import { useState } from "react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/solid";
|
||||
import { ContainsDropdown } from "./ContainsDropdown";
|
||||
|
||||
const mockTags = ["food relief", "period poverty", "nutrition education"];
|
||||
|
||||
type FilterType = "contains" | "does not contain" | "is empty" | "is not empty";
|
||||
|
||||
export const FilterBox = () => {
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showContainsDropdown, setShowContainsDropdown] = useState(false);
|
||||
const [filterType, setFilterType] = useState<FilterType>("contains");
|
||||
|
||||
const handleTagChange = (tag: string) => {
|
||||
setSelectedTags((prevTags) =>
|
||||
prevTags.includes(tag)
|
||||
? prevTags.filter((t) => t !== tag)
|
||||
: [...prevTags, tag]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchTerm(e.target.value);
|
||||
};
|
||||
|
||||
const renderSelectedTags = () =>
|
||||
selectedTags.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
className="bg-purple-100 text-purple-800 px-2 py-1 rounded-md flex items-center mr-2"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
<span
|
||||
className="ml-2 cursor-pointer"
|
||||
onClick={() => handleTagChange(tag)}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="text-xs bg-white border border-gray-300 z-50 rounded-md p-2 shadow absolute right-5 top-[200px]">
|
||||
<div className="mb-2">
|
||||
<span className="font-semibold">
|
||||
Tags{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
setShowContainsDropdown((prevState) => !prevState)
|
||||
}
|
||||
className="hover:bg-gray-50 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
{filterType} <ChevronDownIcon className="inline h-3" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap mb-2 px-2 py-1 border border-gray-300 rounded w-full">
|
||||
{selectedTags.length > 0 && renderSelectedTags()}
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
placeholder="Search tags..."
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{mockTags
|
||||
.filter((tag) =>
|
||||
tag.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
.map((tag) => (
|
||||
<div key={tag} className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedTags.includes(tag)}
|
||||
onChange={() => handleTagChange(tag)}
|
||||
className="mr-2 accent-purple-500"
|
||||
/>
|
||||
<label>{tag}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{showContainsDropdown && (
|
||||
<ContainsDropdown
|
||||
isDropdownOpen={showContainsDropdown}
|
||||
setIsDropdownOpen={setShowContainsDropdown}
|
||||
filterType={filterType}
|
||||
setFilterType={setFilterType}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
import React, { ReactNode } from "react";
|
||||
|
||||
interface Link {
|
||||
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||
href?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const InlineLink: React.FC<Link> = ({ href = "#", children }) => {
|
||||
const InlineLink: React.FC<Link> = ({ href = "#", children, onClick }) => {
|
||||
return (
|
||||
<a
|
||||
onClick={onClick}
|
||||
href={href}
|
||||
className="text-sm text-purple-600 hover:underline font-semibold"
|
||||
>
|
||||
|
|
|
|||
27
compass/components/PageLayout.tsx
Normal file
27
compass/components/PageLayout.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
interface PageLayoutProps {
|
||||
icon: React.ReactElement;
|
||||
title: string;
|
||||
children: React.ReactElement;
|
||||
}
|
||||
|
||||
export const PageLayout: React.FC<PageLayoutProps> = ({
|
||||
icon,
|
||||
title,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* icon + title */}
|
||||
<div className="pt-16 px-8 pb-4 flex-row">
|
||||
<div className="mb-4 flex items-center space-x-4">
|
||||
<span className="w-6 h-6 text-purple-200">{icon}</span>
|
||||
<h1 className="font-bold text-2xl text-purple-800">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{/* data */}
|
||||
<div className="px-8 py-8">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
42
compass/components/Table.tsx
Normal file
42
compass/components/Table.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Component } from "react";
|
||||
|
||||
// interface TableHeader {
|
||||
// title: string,
|
||||
// type: string
|
||||
// }
|
||||
|
||||
// interface TableRow {
|
||||
// [key: string]: any,
|
||||
// }
|
||||
interface TableProps {
|
||||
headersData: string[];
|
||||
data: { [key: string]: any }[];
|
||||
}
|
||||
|
||||
const Table: React.FC<TableProps> = ({ headersData, data }) => {
|
||||
const headers = headersData.map((header, i) => {
|
||||
return <th key={"header-" + i}>{header}</th>;
|
||||
});
|
||||
|
||||
console.log(data);
|
||||
|
||||
const rows = data.map((item) => {
|
||||
const row = headersData.map((key) => {
|
||||
return <td key={"item-" + item.id + key}>{item[key]}</td>;
|
||||
});
|
||||
return <tr key={"item-" + item.id}>{row}</tr>;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>{headers}</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Table;
|
||||
321
compass/components/Table/Index.tsx
Normal file
321
compass/components/Table/Index.tsx
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
// for showcasing to compass
|
||||
|
||||
import usersImport from "./users.json";
|
||||
import {
|
||||
Cell,
|
||||
ColumnDef,
|
||||
Row,
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
sortingFns,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import {
|
||||
ChangeEvent,
|
||||
useState,
|
||||
useEffect,
|
||||
FunctionComponent,
|
||||
useRef,
|
||||
ChangeEventHandler,
|
||||
Key,
|
||||
} from "react";
|
||||
import { RowOptionMenu } from "./RowOptionMenu";
|
||||
import { RowOpenAction } from "./RowOpenAction";
|
||||
import { TableAction } from "./TableAction";
|
||||
import {
|
||||
AtSymbolIcon,
|
||||
Bars2Icon,
|
||||
ArrowDownCircleIcon,
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import TagsInput from "../TagsInput/Index";
|
||||
import { rankItem } from "@tanstack/match-sorter-utils";
|
||||
import { TableCell } from "./TableCell";
|
||||
import { PrimaryTableCell } from "./PrimaryTableCell";
|
||||
|
||||
const usersExample = usersImport as unknown as User[];
|
||||
|
||||
type User = {
|
||||
id: number;
|
||||
created_at: any;
|
||||
username: string;
|
||||
role: "administrator" | "employee" | "volunteer";
|
||||
email: string;
|
||||
program: "domestic" | "economic" | "community";
|
||||
experience: number;
|
||||
group?: string;
|
||||
visible: boolean;
|
||||
};
|
||||
|
||||
// For search
|
||||
const fuzzyFilter = (
|
||||
row: Row<any>,
|
||||
columnId: string,
|
||||
value: any,
|
||||
addMeta: (meta: any) => void
|
||||
) => {
|
||||
// Rank the item
|
||||
const itemRank = rankItem(row.getValue(columnId), value);
|
||||
|
||||
// Store the ranking info
|
||||
addMeta(itemRank);
|
||||
|
||||
// Return if the item should be filtered in/out
|
||||
return itemRank.passed;
|
||||
};
|
||||
|
||||
export const Table = () => {
|
||||
const columnHelper = createColumnHelper<User>();
|
||||
|
||||
useEffect(() => {
|
||||
const sortedUsers = [...usersExample].sort((a, b) =>
|
||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
||||
);
|
||||
setData(sortedUsers);
|
||||
}, []);
|
||||
|
||||
const deleteUser = (userId) => {
|
||||
console.log(data);
|
||||
setData((currentData) =>
|
||||
currentData.filter((user) => user.id !== userId)
|
||||
);
|
||||
};
|
||||
|
||||
const hideUser = (userId: number) => {
|
||||
console.log(`Toggling visibility for user with ID: ${userId}`);
|
||||
setData((currentData) => {
|
||||
const newData = currentData
|
||||
.map((user) => {
|
||||
if (user.id === userId) {
|
||||
return { ...user, visible: !user.visible };
|
||||
}
|
||||
return user;
|
||||
})
|
||||
.sort((a, b) =>
|
||||
a.visible === b.visible ? 0 : a.visible ? -1 : 1
|
||||
);
|
||||
|
||||
console.log(newData);
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
const [presetOptions, setPresetOptions] = useState([
|
||||
"administrator",
|
||||
"volunteer",
|
||||
"employee",
|
||||
]);
|
||||
const [tagColors, setTagColors] = useState(new Map());
|
||||
|
||||
const getTagColor = (tag: string) => {
|
||||
if (!tagColors.has(tag)) {
|
||||
const colors = [
|
||||
"bg-cyan-100",
|
||||
"bg-blue-100",
|
||||
"bg-green-100",
|
||||
"bg-yellow-100",
|
||||
"bg-purple-100",
|
||||
];
|
||||
const randomColor =
|
||||
colors[Math.floor(Math.random() * colors.length)];
|
||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
||||
}
|
||||
return tagColors.get(tag);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
columnHelper.display({
|
||||
id: "options",
|
||||
cell: (props) => (
|
||||
<RowOptionMenu
|
||||
onDelete={() => deleteUser(props.row.original.id)}
|
||||
onHide={() => hideUser(props.row.original.id)}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("username", {
|
||||
header: () => (
|
||||
<>
|
||||
<Bars2Icon className="inline align-top h-4" /> Username
|
||||
</>
|
||||
),
|
||||
cell: (info) => (
|
||||
<RowOpenAction
|
||||
title={info.getValue()}
|
||||
rowData={info.row.original}
|
||||
onRowUpdate={handleRowUpdate}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("role", {
|
||||
header: () => (
|
||||
<>
|
||||
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
||||
Role
|
||||
</>
|
||||
),
|
||||
cell: (info) => (
|
||||
<TagsInput
|
||||
presetValue={info.getValue()}
|
||||
presetOptions={presetOptions}
|
||||
setPresetOptions={setPresetOptions}
|
||||
getTagColor={getTagColor}
|
||||
setTagColors={setTagColors}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("email", {
|
||||
header: () => (
|
||||
<>
|
||||
<AtSymbolIcon className="inline align-top h-4" /> Email
|
||||
</>
|
||||
),
|
||||
cell: (info) => (
|
||||
<span className="ml-2 text-gray-500 underline hover:text-gray-400">
|
||||
{info.getValue()}
|
||||
</span>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("program", {
|
||||
header: () => (
|
||||
<>
|
||||
<ArrowDownCircleIcon className="inline align-top h-4" />{" "}
|
||||
Program
|
||||
</>
|
||||
),
|
||||
cell: (info) => <TagsInput presetValue={info.getValue()} />,
|
||||
}),
|
||||
];
|
||||
|
||||
const [data, setData] = useState<User[]>([...usersExample]);
|
||||
|
||||
const addUser = () => {
|
||||
setData([...data, {}]);
|
||||
};
|
||||
|
||||
// Searching
|
||||
const [query, setQuery] = useState("");
|
||||
const handleSearchChange = (e: ChangeEvent) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setQuery(String(target.value));
|
||||
};
|
||||
|
||||
const handleCellChange = (e: ChangeEvent, key: Key) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
// TODO: Filtering
|
||||
|
||||
// TODO: Sorting
|
||||
|
||||
// added this fn for editing rows
|
||||
const handleRowUpdate = (updatedRow: User) => {
|
||||
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
|
||||
if (dataIndex !== -1) {
|
||||
const updatedData = [...data];
|
||||
updatedData[dataIndex] = updatedRow;
|
||||
setData(updatedData);
|
||||
}
|
||||
};
|
||||
|
||||
const table = useReactTable({
|
||||
columns,
|
||||
data,
|
||||
filterFns: {
|
||||
fuzzy: fuzzyFilter,
|
||||
},
|
||||
state: {
|
||||
globalFilter: query,
|
||||
},
|
||||
onGlobalFilterChange: setQuery,
|
||||
globalFilterFn: fuzzyFilter,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const handleRowData = (row: any) => {
|
||||
const rowData: any = {};
|
||||
row.cells.forEach((cell: any) => {
|
||||
rowData[cell.column.id] = cell.value;
|
||||
});
|
||||
// Use rowData object containing data from all columns for the current row
|
||||
console.log(rowData);
|
||||
return rowData;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row justify-end">
|
||||
<TableAction query={query} handleChange={handleSearchChange} />
|
||||
</div>
|
||||
<table className="w-full text-xs text-left rtl:text-right">
|
||||
<thead className="text-xs text-gray-500 capitalize">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header, i) => (
|
||||
<th
|
||||
scope="col"
|
||||
className={
|
||||
"p-2 border-gray-200 border-y font-medium " +
|
||||
(1 < i && i < columns.length - 1
|
||||
? "border-x"
|
||||
: "")
|
||||
}
|
||||
key={header.id}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row) => {
|
||||
// Individual row
|
||||
const isUserVisible = row.original.visible;
|
||||
const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${
|
||||
!isUserVisible ? "bg-gray-200 text-gray-500" : ""
|
||||
}`;
|
||||
return (
|
||||
<tr className={rowClassNames} key={row.id}>
|
||||
{row.getVisibleCells().map((cell, i) => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className={
|
||||
"[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"
|
||||
}
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td
|
||||
className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
|
||||
colSpan={100}
|
||||
onClick={addUser}
|
||||
>
|
||||
<span className="flex ml-1 text-gray-500">
|
||||
<PlusIcon className="inline h-4 mr-1" />
|
||||
New
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
33
compass/components/Table/PrimaryTableCell.tsx
Normal file
33
compass/components/Table/PrimaryTableCell.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* An extension of TableCell.tsx that includes an "open" button and the drawer.
|
||||
For cells in the "primary" (or first) column of the table. */
|
||||
import Drawer from "@/components/page/Drawer";
|
||||
import { TableCell } from "./TableCell";
|
||||
import { SetStateAction, useState } from "react";
|
||||
|
||||
export const PrimaryTableCell = ({ getValue, row, column, table }) => {
|
||||
const [pageContent, setPageContent] = useState("");
|
||||
|
||||
const handleDrawerContentChange = (newContent: SetStateAction<string>) => {
|
||||
setPageContent(newContent);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="font-semibold group">
|
||||
<TableCell
|
||||
getValue={getValue}
|
||||
row={row}
|
||||
column={column}
|
||||
table={table}
|
||||
/>
|
||||
<span className="absolute right-1 top-1">
|
||||
<Drawer
|
||||
title={getValue()}
|
||||
editableContent={pageContent}
|
||||
onSave={handleDrawerContentChange}
|
||||
>
|
||||
{pageContent}
|
||||
</Drawer>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
28
compass/components/Table/RowOpenAction.tsx
Normal file
28
compass/components/Table/RowOpenAction.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import Drawer from "@/components/page/Drawer";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
|
||||
export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
|
||||
const [pageContent, setPageContent] = useState("");
|
||||
|
||||
const handleDrawerContentChange = (newContent) => {
|
||||
setPageContent(newContent);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="font-semibold group flex flex-row items-center justify-between pr-2">
|
||||
{title}
|
||||
<span>
|
||||
{/* Added OnRowUpdate to drawer */}
|
||||
<Drawer
|
||||
title="My Drawer Title"
|
||||
editableContent={pageContent}
|
||||
rowContent={rowData}
|
||||
onSave={handleDrawerContentChange}
|
||||
onRowUpdate={onRowUpdate}
|
||||
>
|
||||
{pageContent}
|
||||
</Drawer>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
18
compass/components/Table/RowOption.tsx
Normal file
18
compass/components/Table/RowOption.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from "react";
|
||||
import {
|
||||
TrashIcon,
|
||||
DocumentDuplicateIcon,
|
||||
ArrowUpRightIcon,
|
||||
EyeSlashIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
|
||||
export const RowOption = ({ icon: Icon, label, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="hover:bg-gray-100 flex items-center gap-2 p-2 w-full"
|
||||
>
|
||||
<Icon className="inline h-4" /> {label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
46
compass/components/Table/RowOptionMenu.tsx
Normal file
46
compass/components/Table/RowOptionMenu.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
//delete, duplicate, open
|
||||
import {
|
||||
TrashIcon,
|
||||
DocumentDuplicateIcon,
|
||||
ArrowUpRightIcon,
|
||||
EllipsisVerticalIcon,
|
||||
EyeSlashIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import Button from "../Button";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { RowOption } from "./RowOption";
|
||||
|
||||
export const RowOptionMenu = ({ onDelete, onHide }) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const openMenu = () => setMenuOpen(true);
|
||||
const closeMenu = () => setMenuOpen(false);
|
||||
|
||||
// TODO: Hide menu if clicked elsewhere
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="align-center"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-4" />
|
||||
</button>
|
||||
<div
|
||||
className={
|
||||
"justify-start border border-gray-200 shadow-lg flex flex-col absolute bg-white w-auto p-2 rounded [&>*]:rounded z-10" +
|
||||
(!menuOpen ? " invisible" : "")
|
||||
}
|
||||
>
|
||||
<RowOption icon={TrashIcon} label="Delete" onClick={onDelete} />
|
||||
<RowOption
|
||||
icon={ArrowUpRightIcon}
|
||||
label="Open"
|
||||
onClick={() => {
|
||||
/* handle open */
|
||||
}}
|
||||
/>
|
||||
<RowOption icon={EyeSlashIcon} label="Hide" onClick={onHide} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
69
compass/components/Table/TableAction.tsx
Normal file
69
compass/components/Table/TableAction.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// TableAction.tsx
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
|
||||
import { ChangeEventHandler, FunctionComponent, useRef, useState } from "react";
|
||||
import { FilterBox } from "../FilterBox";
|
||||
|
||||
type TableActionProps = {
|
||||
query: string;
|
||||
handleChange: ChangeEventHandler<HTMLInputElement>;
|
||||
};
|
||||
|
||||
export const TableAction: FunctionComponent<TableActionProps> = ({
|
||||
query,
|
||||
handleChange,
|
||||
}) => {
|
||||
const searchInput = useRef<HTMLInputElement>(null);
|
||||
const [searchActive, setSearchActive] = useState(false);
|
||||
const [showFilterBox, setShowFilterBox] = useState(false);
|
||||
|
||||
const activateSearch = () => {
|
||||
setSearchActive(true);
|
||||
if (searchInput.current === null) {
|
||||
return;
|
||||
}
|
||||
searchInput.current.focus();
|
||||
searchInput.current.addEventListener("focusout", () => {
|
||||
if (searchInput.current?.value.trim() === "") {
|
||||
searchInput.current.value = "";
|
||||
deactivateSearch();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const deactivateSearch = () => setSearchActive(false);
|
||||
|
||||
const toggleFilterBox = () => setShowFilterBox((prev) => !prev);
|
||||
|
||||
return (
|
||||
<div className="w-auto flex flex-row gap-x-0.5 items-center justify-between text-xs font-medium text-gray-500 p-2">
|
||||
<span
|
||||
className="p-1 rounded hover:text-purple-700 focus:bg-purple-50 hover:bg-purple-50"
|
||||
onClick={toggleFilterBox}
|
||||
>
|
||||
Filter
|
||||
</span>
|
||||
{showFilterBox && <FilterBox />}
|
||||
<span className="p-1 rounded hover:text-purple-700 focus:bg-purple-50 hover:bg-purple-50 hover:bg-gray-100">
|
||||
Sort
|
||||
</span>
|
||||
<span
|
||||
className="p-1 rounded hover:text-purple-700 focus:bg-purple-50 hover:bg-purple-50 hover:bg-gray-100"
|
||||
onClick={activateSearch}
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 inline" />
|
||||
</span>
|
||||
<input
|
||||
ref={searchInput}
|
||||
className={
|
||||
"outline-none transition-all duration-300 " +
|
||||
(searchActive ? "w-48" : "w-0")
|
||||
}
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Type to search..."
|
||||
value={query ?? ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
29
compass/components/Table/TableCell.tsx
Normal file
29
compass/components/Table/TableCell.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* A lone table cell. Passed in for "cell" for a TanStack Table. */
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export const TableCell = ({ getValue, row, column, table }) => {
|
||||
const initialValue = getValue();
|
||||
const [value, setValue] = useState(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(initialValue);
|
||||
}, [initialValue]);
|
||||
|
||||
const onBlur = () => {
|
||||
table.options.meta?.updateData(row.index, column.id, value);
|
||||
};
|
||||
// focus:border focus:border-gray-200
|
||||
const className =
|
||||
"w-full p-3 bg-inherit rounded-md outline-none border border-transparent relative " +
|
||||
"focus:shadow-md focus:border-gray-200 focus:bg-white focus:z-20 focus:p-4 focus:-m-1 " +
|
||||
"focus:w-[calc(100%+0.5rem)]";
|
||||
|
||||
return (
|
||||
<input
|
||||
className={className}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
);
|
||||
};
|
||||
222
compass/components/Table/users.json
Normal file
222
compass/components/Table/users.json
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
[
|
||||
{
|
||||
"id": 0,
|
||||
"created_at": 1711482132230,
|
||||
"username": "Bo_Pfeffer",
|
||||
"role": "ADMIN",
|
||||
"email": "Bo.Pfeffer@gmail.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Marianna_Heathcote76",
|
||||
"role": "ADMIN",
|
||||
"email": "Marianna_Heathcote14@yahoo.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 1,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Queenie_Schroeder",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Queenie_Schroeder@yahoo.com",
|
||||
"program": "COMMUNITY",
|
||||
"experience": 5,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Arne.Bode",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Arne.Bode@hotmail.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 3,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Maia.Zulauf9",
|
||||
"role": "ADMIN",
|
||||
"email": "Maia_Zulauf@gmail.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 5,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"created_at": 1711482132231,
|
||||
"username": "River_Bauch",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "River.Bauch@yahoo.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Virgil.Hilll",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Virgil.Hilll@yahoo.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 3,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Bridget_Cartwright",
|
||||
"role": "ADMIN",
|
||||
"email": "Bridget_Cartwright@yahoo.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 3,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"created_at": 1711482132231,
|
||||
"username": "Glennie_Keebler64",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "Glennie_Keebler60@yahoo.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Orin.Jenkins53",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "Orin.Jenkins@gmail.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 1,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Zachery.Rosenbaum",
|
||||
"role": "ADMIN",
|
||||
"email": "Zachery.Rosenbaum@hotmail.com",
|
||||
"program": "COMMUNITY",
|
||||
"experience": 3,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Phoebe.Ziemann",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "Phoebe_Ziemann92@gmail.com",
|
||||
"program": "COMMUNITY",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Bradford_Conroy53",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Bradford_Conroy94@hotmail.com",
|
||||
"program": "COMMUNITY",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Florine_Strosin55",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Florine.Strosin29@hotmail.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 1,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Constance.Doyle59",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "Constance_Doyle@hotmail.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 3,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Chauncey_Lockman",
|
||||
"role": "ADMIN",
|
||||
"email": "Chauncey_Lockman@yahoo.com",
|
||||
"program": "DOMESTIC",
|
||||
"experience": 5,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Esther_Wuckert-Larson26",
|
||||
"role": "EMPLOYEE",
|
||||
"email": "Esther_Wuckert-Larson@gmail.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 0,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Jewel.Kunde",
|
||||
"role": "VOLUNTEER",
|
||||
"email": "Jewel_Kunde29@gmail.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 5,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Hildegard_Parker92",
|
||||
"role": "ADMIN",
|
||||
"email": "Hildegard_Parker74@yahoo.com",
|
||||
"program": "ECONOMIC",
|
||||
"experience": 2,
|
||||
"group": "",
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"created_at": 1711482132232,
|
||||
"username": "Jordane.Lakin2",
|
||||
"role": "ADMIN",
|
||||
"email": "Jordane_Lakin@hotmail.com",
|
||||
"program": "COMMUNITY",
|
||||
"experience": 1,
|
||||
"group": "",
|
||||
"visible": true
|
||||
}
|
||||
]
|
||||
12
compass/components/TagsInput/CreateNewTagAction.tsx
Normal file
12
compass/components/TagsInput/CreateNewTagAction.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Tag } from "./Tag";
|
||||
|
||||
export const CreateNewTagAction = ({ input }) => {
|
||||
return (
|
||||
<div className="flex flex-row space-x-2 hover:bg-gray-100 rounded-md py-2 p-2 items-center">
|
||||
<p className="capitalize">Create</p>
|
||||
<Tag active={false} onDelete={null}>
|
||||
{input}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
49
compass/components/TagsInput/DropdownAction.tsx
Normal file
49
compass/components/TagsInput/DropdownAction.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { EllipsisHorizontalIcon, TrashIcon } from "@heroicons/react/24/solid";
|
||||
import { useState } from "react";
|
||||
|
||||
export const DropdownAction = ({ tag, handleDeleteTag, handleEditTag }) => {
|
||||
const [isVisible, setVisible] = useState(false);
|
||||
const [inputValue, setInputValue] = useState(tag);
|
||||
|
||||
const editTagOption = (e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleEditTag(tag, inputValue);
|
||||
setVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 text-gray-500"
|
||||
onClick={() => setVisible(!isVisible)}
|
||||
/>
|
||||
{isVisible && (
|
||||
<div className="absolute flex flex-col justify-start z-50 rounded-md bg-white border border-gray-200 shadow p-2 space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={editTagOption}
|
||||
autoFocus
|
||||
className="bg-gray-50 text-2xs focus:outline-none rounded-md font-normal text-gray-800 p-1 border-2 focus:border-blue-200"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleDeleteTag(inputValue);
|
||||
setVisible(false);
|
||||
}}
|
||||
className="justify-start flex flex-row space-x-4 hover:bg-gray-100 rounded-md items-center p-2 px-2"
|
||||
>
|
||||
<TrashIcon className="w-3 h-3" />
|
||||
<p>Delete</p>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
161
compass/components/TagsInput/Index.tsx
Normal file
161
compass/components/TagsInput/Index.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import React, { useState, useRef } from "react";
|
||||
import "tailwindcss/tailwind.css";
|
||||
import { TagsArray } from "./TagsArray";
|
||||
import { TagDropdown } from "./TagDropdown";
|
||||
import { CreateNewTagAction } from "./CreateNewTagAction";
|
||||
|
||||
interface TagsInputProps {
|
||||
presetOptions: string[];
|
||||
}
|
||||
|
||||
const TagsInput: React.FC<TagsInputProps> = ({
|
||||
presetValue,
|
||||
presetOptions,
|
||||
setPresetOptions,
|
||||
getTagColor,
|
||||
}) => {
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [cellSelected, setCellSelected] = useState(false);
|
||||
const [tags, setTags] = useState<Set<string>>(
|
||||
new Set(presetValue ? [presetValue] : [])
|
||||
);
|
||||
const [options, setOptions] = useState<Set<string>>(new Set(presetOptions));
|
||||
const dropdown = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleClick = () => {
|
||||
if (!cellSelected) {
|
||||
setCellSelected(true);
|
||||
// Add event listener only after setting cellSelected to true
|
||||
setTimeout(() => {
|
||||
window.addEventListener("click", handleOutsideClick);
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOutsideClick = (event) => {
|
||||
if (dropdown.current && !dropdown.current.contains(event.target)) {
|
||||
setCellSelected(false);
|
||||
// Remove event listener after handling outside click
|
||||
window.removeEventListener("click", handleOutsideClick);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setOptions(() => {
|
||||
const newOptions = presetOptions.filter((item) =>
|
||||
item.includes(e.target.value.toLowerCase())
|
||||
);
|
||||
return new Set(newOptions);
|
||||
});
|
||||
setInputValue(e.target.value); // Update input value state
|
||||
};
|
||||
|
||||
const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && inputValue.trim()) {
|
||||
// setPresetOptions((prevPreset) => {
|
||||
// const uniqueSet = new Set(presetOptions);
|
||||
// uniqueSet.add(inputValue);
|
||||
// return Array.from(uniqueSet);
|
||||
// });
|
||||
setTags((prevTags) => new Set(prevTags).add(inputValue));
|
||||
setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
|
||||
setInputValue("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectTag = (tagToAdd: string) => {
|
||||
if (!tags.has(tagToAdd)) {
|
||||
// Corrected syntax for checking if a Set contains an item
|
||||
setTags((prevTags) => new Set(prevTags).add(tagToAdd));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteTag = (tagToDelete: string) => {
|
||||
setTags((prevTags) => {
|
||||
const updatedTags = new Set(prevTags);
|
||||
updatedTags.delete(tagToDelete);
|
||||
return updatedTags;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteTagOption = (tagToDelete: string) => {
|
||||
// setPresetOptions(presetOptions.filter(tag => tag !== tagToDelete));
|
||||
setOptions((prevOptions) => {
|
||||
const updatedOptions = new Set(prevOptions);
|
||||
updatedOptions.delete(tagToDelete);
|
||||
return updatedOptions;
|
||||
});
|
||||
if (tags.has(tagToDelete)) {
|
||||
handleDeleteTag(tagToDelete);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditTag = (oldTag: string, newTag: string) => {
|
||||
if (oldTag !== newTag) {
|
||||
setTags((prevTags) => {
|
||||
const tagsArray = Array.from(prevTags);
|
||||
const oldTagIndex = tagsArray.indexOf(oldTag);
|
||||
if (oldTagIndex !== -1) {
|
||||
tagsArray.splice(oldTagIndex, 1, newTag);
|
||||
}
|
||||
return new Set(tagsArray);
|
||||
});
|
||||
|
||||
setOptions((prevOptions) => {
|
||||
const optionsArray = Array.from(prevOptions);
|
||||
const oldTagIndex = optionsArray.indexOf(oldTag);
|
||||
if (oldTagIndex !== -1) {
|
||||
optionsArray.splice(oldTagIndex, 1, newTag);
|
||||
}
|
||||
return new Set(optionsArray);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="cursor-pointer" onClick={handleClick}>
|
||||
{!cellSelected ? (
|
||||
<TagsArray handleDelete={handleDeleteTag} tags={tags} />
|
||||
) : (
|
||||
<div ref={dropdown}>
|
||||
<div className="absolute w-64 z-50 -ml-3 -mt-7">
|
||||
<div className="rounded-md border border-gray-200 shadow">
|
||||
<div className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
|
||||
<TagsArray
|
||||
handleDelete={handleDeleteTag}
|
||||
active
|
||||
tags={tags}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
placeholder="Search for an option..."
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleAddTag}
|
||||
className="focus:outline-none bg-transparent"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="flex rounded-b-md bg-white flex-col border-t border-gray-100 text-2xs font-medium text-gray-500 p-2">
|
||||
<p className="capitalize">
|
||||
Select an option or create one
|
||||
</p>
|
||||
<TagDropdown
|
||||
handleDeleteTag={handleDeleteTagOption}
|
||||
handleEditTag={handleEditTag}
|
||||
handleAdd={handleSelectTag}
|
||||
tags={options}
|
||||
/>
|
||||
{inputValue.length > 0 && (
|
||||
<CreateNewTagAction input={inputValue} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TagsInput;
|
||||
0
compass/components/TagsInput/Input.tsx
Normal file
0
compass/components/TagsInput/Input.tsx
Normal file
17
compass/components/TagsInput/Tag.tsx
Normal file
17
compass/components/TagsInput/Tag.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
export const Tag = ({ children, handleDelete, active = false }) => {
|
||||
return (
|
||||
<span
|
||||
className={`font-normal bg-purple-100 text-gray-800 flex flex-row p-1 px-2 rounded-lg`}
|
||||
>
|
||||
{children}
|
||||
{active && handleDelete && (
|
||||
<button onClick={() => handleDelete(children)}>
|
||||
<XMarkIcon className={`ml-1 w-3 text-purple-500`} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
29
compass/components/TagsInput/TagDropdown.tsx
Normal file
29
compass/components/TagsInput/TagDropdown.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { Tag } from "./Tag";
|
||||
import { DropdownAction } from "./DropdownAction";
|
||||
|
||||
export const TagDropdown = ({
|
||||
tags,
|
||||
handleEditTag,
|
||||
handleDeleteTag,
|
||||
handleAdd,
|
||||
}) => {
|
||||
return (
|
||||
<div className="z-50 flex flex-col space-y-2 mt-2">
|
||||
{Array.from(tags).map((tag, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="items-center rounded-md p-1 flex flex-row justify-between hover:bg-gray-100"
|
||||
>
|
||||
<button onClick={() => handleAdd(tag)}>
|
||||
<Tag>{tag}</Tag>
|
||||
</button>
|
||||
<DropdownAction
|
||||
handleDeleteTag={handleDeleteTag}
|
||||
handleEditTag={handleEditTag}
|
||||
tag={tag}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
25
compass/components/TagsInput/TagsArray.tsx
Normal file
25
compass/components/TagsInput/TagsArray.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { Tag } from "./Tag";
|
||||
|
||||
export interface Tags {
|
||||
tags: string[];
|
||||
handleDelete: () => {};
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => {
|
||||
return (
|
||||
<div className="flex ml-2 flex-wrap gap-2 items-center">
|
||||
{Array.from(tags).map((tag, index) => {
|
||||
return (
|
||||
<Tag
|
||||
handleDelete={handleDelete}
|
||||
active={active}
|
||||
key={index}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
23
compass/components/page/Card.tsx
Normal file
23
compass/components/page/Card.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { ReactNode, useState } from "react";
|
||||
|
||||
interface TagProps {
|
||||
text: string;
|
||||
icon: React.ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const Card: React.FC<TagProps> = ({ children, text, icon, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 w-1/4"
|
||||
>
|
||||
<span className="h-5 text-purple-700 w-5">{icon}</span>
|
||||
<span className="text-sm text-gray-800 font-semibold">{text}</span>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
247
compass/components/page/Drawer.tsx
Normal file
247
compass/components/page/Drawer.tsx
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
import { FunctionComponent, ReactNode } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
|
||||
import {
|
||||
StarIcon as SolidStarIcon,
|
||||
EnvelopeIcon,
|
||||
UserIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import {
|
||||
ArrowsPointingOutIcon,
|
||||
ArrowsPointingInIcon,
|
||||
StarIcon as OutlineStarIcon,
|
||||
ListBulletIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import TagsInput from "../TagsInput/Index";
|
||||
|
||||
type DrawerProps = {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
type?: "button" | "submit" | "reset"; // specify possible values for type
|
||||
disabled?: boolean;
|
||||
editableContent?: any;
|
||||
onSave?: (content: any) => void;
|
||||
rowContent?: any;
|
||||
onRowUpdate?: (content: any) => void;
|
||||
};
|
||||
|
||||
interface EditContent {
|
||||
content: string;
|
||||
isEditing: boolean;
|
||||
}
|
||||
|
||||
const Drawer: FunctionComponent<DrawerProps> = ({
|
||||
title,
|
||||
children,
|
||||
onSave,
|
||||
editableContent,
|
||||
rowContent,
|
||||
onRowUpdate,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isFull, setIsFull] = useState(false);
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
const [tempRowContent, setTempRowContent] = useState(rowContent);
|
||||
|
||||
const handleTempRowContentChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
console.log(name);
|
||||
console.log(value);
|
||||
setTempRowContent((prevContent) => ({
|
||||
...prevContent,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleEnterPress = (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
// Update the rowContent with the temporaryRowContent
|
||||
if (onRowUpdate) {
|
||||
onRowUpdate(tempRowContent);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDrawer = () => {
|
||||
setIsOpen(!isOpen);
|
||||
if (isFull) {
|
||||
setIsFull(!isFull);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDrawerFullScreen = () => setIsFull(!isFull);
|
||||
|
||||
const toggleFavorite = () => setIsFavorite(!isFavorite);
|
||||
|
||||
const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${
|
||||
isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
|
||||
} ${isFull ? "w-full" : "w-1/2"}`;
|
||||
|
||||
const iconComponent = isFull ? (
|
||||
<ArrowsPointingInIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<ArrowsPointingOutIcon className="h-5 w-5" />
|
||||
);
|
||||
|
||||
const favoriteIcon = isFavorite ? (
|
||||
<SolidStarIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<OutlineStarIcon className="h-5 w-5" />
|
||||
);
|
||||
|
||||
const [presetOptions, setPresetOptions] = useState([
|
||||
"administrator",
|
||||
"volunteer",
|
||||
"employee",
|
||||
]);
|
||||
const [rolePresetOptions, setRolePresetOptions] = useState([
|
||||
"domestic",
|
||||
"community",
|
||||
"economic",
|
||||
]);
|
||||
const [tagColors, setTagColors] = useState(new Map());
|
||||
|
||||
const getTagColor = (tag: string) => {
|
||||
if (!tagColors.has(tag)) {
|
||||
const colors = [
|
||||
"bg-cyan-100",
|
||||
"bg-blue-100",
|
||||
"bg-green-100",
|
||||
"bg-yellow-100",
|
||||
"bg-purple-100",
|
||||
];
|
||||
const randomColor =
|
||||
colors[Math.floor(Math.random() * colors.length)];
|
||||
setTagColors(new Map(tagColors).set(tag, randomColor));
|
||||
}
|
||||
return tagColors.get(tag);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
className={
|
||||
"ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
|
||||
}
|
||||
onClick={toggleDrawer}
|
||||
>
|
||||
Open
|
||||
</button>
|
||||
<div className={drawerClassName}></div>
|
||||
<div className={drawerClassName}>
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex flex-row items-center justify-between space-x-2">
|
||||
<span className="h-5 text-purple-200 w-5">
|
||||
<UserIcon />
|
||||
</span>
|
||||
<h2 className="text-lg text-gray-800 font-semibold">
|
||||
{rowContent.username}
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={toggleFavorite}
|
||||
className="py-2 text-gray-500 hover:text-gray-800 mr-2"
|
||||
>
|
||||
{favoriteIcon}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleDrawerFullScreen}
|
||||
className="py-2 text-gray-500 hover:text-gray-800 mr-2"
|
||||
>
|
||||
{iconComponent}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleDrawer}
|
||||
className="py-2 text-gray-500 hover:text-gray-800"
|
||||
>
|
||||
<ChevronDoubleLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<table className="p-4">
|
||||
<tbody className="items-center">
|
||||
<tr className="w-full text-xs items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500 items-center">
|
||||
<td>
|
||||
<UserIcon className="h-4 w-4" />
|
||||
</td>
|
||||
<td className="w-32">Username</td>
|
||||
</div>
|
||||
<td className="w-3/4 w-3/4 p-2 pl-0">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={tempRowContent.username}
|
||||
onChange={handleTempRowContentChange}
|
||||
onKeyDown={handleEnterPress}
|
||||
className="ml-2 w-full p-1 focus:outline-gray-200 hover:bg-gray-50"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="w-full text-xs items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500 items-center">
|
||||
<td>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</td>
|
||||
<td className="w-32">Role</td>
|
||||
</div>
|
||||
<td className="w-3/4 hover:bg-gray-50">
|
||||
<TagsInput
|
||||
presetValue={tempRowContent.role}
|
||||
presetOptions={presetOptions}
|
||||
setPresetOptions={setPresetOptions}
|
||||
getTagColor={getTagColor}
|
||||
setTagColors={setTagColors}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="w-full text-xs items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500 items-center">
|
||||
<td>
|
||||
<EnvelopeIcon className="h-4 w-4" />
|
||||
</td>
|
||||
<td className="w-32">Email</td>
|
||||
</div>
|
||||
<td className="w-3/4 p-2 pl-0">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
value={tempRowContent.email}
|
||||
onChange={handleTempRowContentChange}
|
||||
onKeyDown={handleEnterPress}
|
||||
className="ml-2 w-80 p-1 font-normal hover:text-gray-400 focus:outline-gray-200 hover:bg-gray-50 underline text-gray-500"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="w-full text-xs items-center flex flex-row justify-between">
|
||||
<div className="flex flex-row space-x-2 text-gray-500 items-center">
|
||||
<td>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</td>
|
||||
<td className="w-32">Type of Program</td>
|
||||
</div>
|
||||
<td className="w-3/4 hover:bg-gray-50">
|
||||
{/* {rowContent.program} */}
|
||||
<TagsInput
|
||||
presetValue={tempRowContent.program}
|
||||
presetOptions={rolePresetOptions}
|
||||
setPresetOptions={setRolePresetOptions}
|
||||
getTagColor={getTagColor}
|
||||
setTagColors={setTagColors}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Drawer;
|
||||
40
compass/components/page/DropDown.tsx
Normal file
40
compass/components/page/DropDown.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React, { ChangeEvent, FunctionComponent } from "react";
|
||||
|
||||
// Define the shape of a single option
|
||||
interface DropdownOption {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
// Define the props for the Dropdown component
|
||||
interface DropdownProps {
|
||||
options: DropdownOption[];
|
||||
onChange: (event: ChangeEvent<HTMLSelectElement>) => void; // Type for change event on <select>
|
||||
defaultValue?: string | number;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
// Dropdown Component
|
||||
const Dropdown: FunctionComponent<DropdownProps> = ({
|
||||
options,
|
||||
onChange,
|
||||
defaultValue,
|
||||
id,
|
||||
}) => {
|
||||
return (
|
||||
<select
|
||||
id={id}
|
||||
defaultValue={defaultValue}
|
||||
onChange={onChange}
|
||||
className="form-select form-select-lg mb-3"
|
||||
>
|
||||
{options.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dropdown;
|
||||
|
|
@ -1,9 +1,16 @@
|
|||
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
MagnifyingGlassIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import React, { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { FilterBox } from "../FilterBox";
|
||||
|
||||
export const LandingSearchBar: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [showFilterBox, setShowFilterBox] = useState(false);
|
||||
const toggleFilterBox = () => setShowFilterBox((prev) => !prev);
|
||||
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchTerm(event.target.value);
|
||||
|
|
@ -35,7 +42,14 @@ export const LandingSearchBar: React.FC = () => {
|
|||
/>
|
||||
</button>
|
||||
)}
|
||||
<div className="p-3">
|
||||
<div className="flex flex-row space-x-1 p-3">
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className="h-5 w-5 text-gray-500"
|
||||
onClick={toggleFilterBox}
|
||||
/>
|
||||
</span>
|
||||
{showFilterBox && <FilterBox className="relative top-50" />}
|
||||
<MagnifyingGlassIcon
|
||||
className="h-5 w-5 text-gray-500"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,22 @@
|
|||
interface SidebarItemProps {
|
||||
icon: React.ReactElement;
|
||||
text: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
|
||||
export const SidebarItem: React.FC<SidebarItemProps> = ({
|
||||
icon,
|
||||
text,
|
||||
active,
|
||||
}) => {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md"
|
||||
className={
|
||||
active
|
||||
? "flex items-center p-2 space-x-2 bg-gray-200 rounded-md"
|
||||
: "flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md"
|
||||
}
|
||||
>
|
||||
<span className="h-5 text-gray-500 w-5">{icon}</span>
|
||||
<span className="flex-grow font-medium text-xs text-gray-500">
|
||||
|
|
|
|||
7823
compass/package-lock.json
generated
7823
compass/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,8 @@
|
|||
"@heroicons/react": "^2.1.1",
|
||||
"@supabase/ssr": "^0.3.0",
|
||||
"@supabase/supabase-js": "^2.42.3",
|
||||
"@tanstack/match-sorter-utils": "^8.15.1",
|
||||
"@tanstack/react-table": "^8.15.0",
|
||||
"next": "13.5.6",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user