feat: table view for mobiles

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -6,9 +6,11 @@ import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 import { useDrawersContext } from "@/drawers/DrawersContext";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema } from "@/lib/client";
 
 const DealsTable: FC = () => {
+    const isMobile = useIsMobile();
     const { selectedProject } = useProjectsContext();
     const { deals, paginationInfo, page, setPage, sortingForm, dealsCrud } =
         useDealsContext();
@@ -33,9 +35,11 @@ const DealsTable: FC = () => {
 
     return (
         <Stack
+            p={isMobile ? "xs" : ""}
             gap={"xs"}
             h={"100%"}>
             <BaseTable
+                withTableBorder
                 records={[...deals]}
                 columns={columns}
                 sortStatus={{

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 import { IconEdit } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
-import { ActionIcon, Tooltip } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";
 
@@ -10,44 +11,43 @@ type Props = {
 };
 
 const useDealsTableColumns = ({ onEditClick }: Props) => {
+    const isMobile = useIsMobile();
+
     return useMemo(
         () =>
             [
                 {
                     accessor: "actions",
-                    title: "Действия",
+                    title: isMobile ? "" : "Действия",
                     sortable: false,
                     textAlign: "center",
                     width: "0%",
                     render: deal => (
-                        <Tooltip label="Редактировать">
-                            <ActionIcon
-                                bdrs={"md"}
-                                size={"lg"}
-                                onClick={() => onEditClick(deal)}
-                                variant={"default"}>
-                                <IconEdit />
-                            </ActionIcon>
-                        </Tooltip>
+                        <ActionIconWithTip
+                            tipLabel={"Редактировать"}
+                            onClick={() => onEditClick(deal)}
+                            variant={isMobile ? "subtle" : "default"}>
+                            <IconEdit />
+                        </ActionIconWithTip>
                     ),
                 },
                 {
                     accessor: "id",
-                    title: "Номер",
+                    title: isMobile ? "№" : "Номер",
                     sortable: true,
-                    width: "30%",
+                    width: "20%",
                 },
                 {
                     accessor: "name",
                     title: "Название",
-                    width: "40%",
+                    width: "45%",
                 },
                 {
                     title: "Дата создания",
                     accessor: "createdAt",
                     render: deal => utcDateTimeToLocalString(deal.createdAt),
                     sortable: true,
-                    width: "30%",
+                    width: "35%",
                 },
             ] as DataTableColumn<DealSchema>[],
         [onEditClick]

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -12,7 +12,11 @@ import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
-export type View = "board" | "table" | "schedule";
+export enum View {
+    BOARD = "board",
+    TABLE = "table",
+    SCHEDULE = "schedule"
+}
 
 type Props = {
     view: View;
@@ -42,7 +46,7 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                 onChange: (values: DealsFiltersForm) =>
                     dealsFiltersForm.setValues(values),
                 project: selectedProject,
-                boardAndStatusEnabled: view === "table",
+                boardAndStatusEnabled: view === View.TABLE,
             },
         });
     };

src/app/deals/components/desktop/ViewSelector/ViewSelector.tsx

@@ -16,15 +16,15 @@ type Props = {
 const ViewSelector: FC<Props> = ({ value, onChange }) => {
     const views = [
         {
-            value: "board" as View,
+            value: View.BOARD,
             icon: <IconLayoutDashboard />,
         },
         {
-            value: "table" as View,
+            value: View.TABLE,
             icon: <IconMenu2 />,
         },
         {
-            value: "schedule" as View,
+            value: View.SCHEDULE,
             icon: <IconCalendarWeekFilled />,
         },
     ];