style: added responsive support

src/app/donations/PageRootComponent.tsx → src/app/funds/PageRootComponent.tsx

@@ -6,7 +6,7 @@ import ChartMemberActivity from "@/components/charts/ChartMemberActivity";
 import ChartMemberAgeDemographic from "@/components/charts/ChartMemberAgeDemographic";
 import DonationTable, {
   TDonationItem,
-} from "@/components/donations/DonationTable";
+} from "@/components/funds/FundTable";
 
 export type DonationResponseType = {
   data: TDonationItem[];

src/app/donations/new/page.tsx → src/app/funds/new/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import DonationForm from "@/components/donations/DonationForm";
+import DonationForm from "@/components/funds/FundForm";
 import Layout from "@/components/ui/Layout";
 // import Alert from "@/components/ui/Alert";
 import { PeopleAdd24Regular } from "@fluentui/react-icons";
@@ -12,7 +12,7 @@ const BREADCRUMB_MENU = [
   },
   {
     title: "Donations",
-    url: "/donations",
+    url: "funds",
   },
   {
     title: "New",

src/app/donations/page.tsx → src/app/funds/page.tsx

@@ -1,14 +1,14 @@
 import PageRootComponent, { TPageConfig } from "./PageRootComponent";
 import { memo } from "react";
-import data from "@/assets/data/donations.json";
+import data from "@/assets/data/funds.json";
 
 /**
  * Retrieves data from the specified URL.
  *
  * @return {Promise<RequestResponseType>} The retrieved data.
  */
 // async function getData(): Promise<DonationResponseType> {
-//     const res = await fetch("/data/donations.json");
+//     const res = await fetch("/datafunds.json");
 //     const data = await res.json();
 
 //     return data;

src/app/teams/[id]/PageRootComponent.tsx

@@ -1,11 +1,40 @@
-import Layout from "@/components/ui/Layout";
-import { memo } from "react";
+"use client";
+import TeamTable, { TTeamItem } from "@/components/team/TeamTable";
+import DashboardLayout from "@/components/ui/dashboard/DashboardLayout";
+import { FC, memo } from "react";
 
-const PageRootComponent = () => {
+export type TeamResponseType = {
+  data: TTeamItem[];
+  offset: number;
+  total: number;
+  limit: number;
+};
+
+export type TPageConfig = {
+  analytics?: boolean;
+  settings?: boolean;
+  table?: boolean;
+};
+
+interface PageRootComponentPropsType {
+  data: TeamResponseType;
+  config: TPageConfig;
+}
+
+const PageRootComponent: FC<PageRootComponentPropsType> = ({
+  data,
+  config,
+}: PageRootComponentPropsType) => {
   return (
-    <Layout>
-      <h1>Team Details</h1>
-    </Layout>
+    <DashboardLayout>
+      <div className="grid grid-cols-1 gap-[22px] p-[22px]">
+        <TeamTable
+          title="Team members"
+          description={`Showing ${data?.limit} of ${data?.total} members`}
+          data={data?.data}
+        />
+      </div>
+    </DashboardLayout>
   );
 };
 

src/app/teams/[id]/page.tsx

@@ -1,8 +1,28 @@
-import PageRootComponent from "./PageRootComponent";
+import PageRootComponent, { TPageConfig } from "./PageRootComponent";
 import { memo } from "react";
+import data from "@/assets/data/team.json";
 
-const PageTeamDetails = async () => {
-  return <PageRootComponent />;
+/**
+ * Retrieves data from the specified URL.
+ *
+ * @return {Promise<RequestResponseType>} The retrieved data.
+ */
+// async function getData(): Promise<TeamResponseType> {
+//     const res = await fetch("/data/team.json");
+//     const data = await res.json();
+
+//     return data;
+// }
+
+const PageTeam = async () => {
+  // const data = await getData();
+  const config: TPageConfig = {
+    analytics: false,
+    settings: false,
+    table: true,
+  };
+
+  return <PageRootComponent data={data} config={config} />;
 };
 
-export default memo(PageTeamDetails);
+export default memo(PageTeam);

src/components/blood-request/BloodRequestTable/TableMenu.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+
+import {
+  MoreVertical16Regular,
+  BookQuestionMark24Regular,
+  Bug24Regular,
+} from "@fluentui/react-icons";
+import Link from "next/link";
+import { FC, memo } from "react";
+
+const TableMenu: FC = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="ghost" size="icon">
+          <MoreVertical16Regular className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem>
+          <DropdownMenuCheckboxItem className="ps-0 py-0">
+            <BookQuestionMark24Regular className="h-5 w-5" />
+          </DropdownMenuCheckboxItem>
+
+          <Link href={"/help/members"} target="_blank">
+            Help
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem >
+
+          <DropdownMenuCheckboxItem className="ps-0 py-0">
+            <Bug24Regular className="h-5 w-5" />
+          </DropdownMenuCheckboxItem>
+          <Link href={"/issues/report"} target="_blank">
+            Report issue
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default memo(TableMenu);

src/components/blood-request/BloodRequestTable/data.tsx

@@ -19,7 +19,7 @@ import { TRequestItem } from ".";
 export const columns: ColumnDef<TRequestItem>[] = [
   {
     accessorKey: "name",
-    header: "User",
+    header: "Patient",
     cell: ({ row }) => {
       return (
         <div className="flex items-center gap-2">
@@ -41,9 +41,20 @@ export const columns: ColumnDef<TRequestItem>[] = [
       );
     },
   },
+  {
+    accessorKey: "blood_group",
+    enableHiding: true,
+  },
+  {
+    accessorKey: "quantity",
+  },
   {
     accessorKey: "blood_type",
-    header: "Blood Type",
+    enableHiding: true,
+  },
+  {
+    id: "blood",
+    header: "Blood",
     cell: ({ row }) => {
       return (
         <div className="flex items-center gap-2">
@@ -110,6 +121,8 @@ export const columns: ColumnDef<TRequestItem>[] = [
   },
 ];
 
+export const hiddenColumns = { "blood_group": false, "quantity": false, "blood_type": false };
+
 // Filter: Telecom Operator
 export const gender = [
   {
@@ -223,7 +236,7 @@ export const filters = [
     options: blood_groups,
   },
   {
-    key: "substance",
+    key: "blood_type",
     label: "Substance",
     options: substance,
   },