fix(invoicer) Code style & UI improvements (#5950)

examples/invoicer/src/components/form/form-item-editable-input-text/index.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from "react";
+import { type PropsWithChildren, useState } from "react";
 import {
   Button,
   Flex,

examples/invoicer/src/components/form/form-item-editable-select/index.tsx

@@ -2,13 +2,13 @@ import {
   Button,
   Flex,
   Form,
-  FormItemProps,
+  type FormItemProps,
   Select,
-  SelectProps,
+  type SelectProps,
   Skeleton,
   Typography,
 } from "antd";
-import { PropsWithChildren, useState } from "react";
+import { type PropsWithChildren, useState } from "react";
 import { EditOutlined } from "@ant-design/icons";
 import { useStyles } from "./styled";
 

examples/invoicer/src/components/form/form-item-editable-text/index.tsx

@@ -1,13 +1,13 @@
+import { type PropsWithChildren, useState } from "react";
 import {
   Button,
   Flex,
   Form,
-  FormItemProps,
+  type FormItemProps,
   Input,
   Skeleton,
   Typography,
 } from "antd";
-import { PropsWithChildren, useState } from "react";
 import { EditOutlined, EnterOutlined } from "@ant-design/icons";
 import { useStyles } from "./styled";
 

examples/invoicer/src/components/form/form-item-upload-logo-draggable/index.tsx

@@ -2,10 +2,10 @@ import { useMemo } from "react";
 import { Button, Flex, Form, Upload, theme } from "antd";
 import { CloudUploadOutlined, PictureOutlined } from "@ant-design/icons";
 import { getValueProps } from "@refinedev/strapi-v4";
-import { RcFile, UploadChangeParam } from "antd/lib/upload";
+import type { RcFile, UploadChangeParam } from "antd/lib/upload";
 import { axiosInstance } from "@/providers/axios";
 import { API_URL, TOKEN_KEY } from "@/utils/constants";
-import { Media, UploadResponse } from "@/types";
+import type { Media, UploadResponse } from "@/types";
 import { useStyles } from "./styled";
 
 type Props = {

examples/invoicer/src/components/form/form-item-upload-logo/index.tsx

@@ -2,11 +2,11 @@ import { useMemo, useState } from "react";
 import { Avatar, Form, Skeleton, Typography, Upload } from "antd";
 import { getValueProps } from "@refinedev/strapi-v4";
 import { CloudUploadOutlined } from "@ant-design/icons";
-import { RcFile } from "antd/lib/upload";
+import type { RcFile } from "antd/lib/upload";
 import { axiosInstance } from "@/providers/axios";
 import { getRandomColorFromString } from "@/utils/get-random-color";
 import { API_URL, TOKEN_KEY } from "@/utils/constants";
-import { Media, UploadResponse } from "@/types";
+import type { Media, UploadResponse } from "@/types";
 import { useStyles } from "./styled";
 
 type Props = {
@@ -83,11 +83,6 @@ export const FormItemUploadLogo = ({
     }
   };
 
-  console.log({
-    src,
-    fieldValue,
-  });
-
   return (
     <div className={styles.container}>
       <Form.Item
@@ -125,6 +120,7 @@ export const FormItemUploadLogo = ({
             }}
           >
             <Avatar
+              key={src}
               size={96}
               shape="square"
               src={src}
@@ -137,9 +133,8 @@ export const FormItemUploadLogo = ({
                 zIndex: 1,
                 cursor: "pointer",
                 borderRadius: "6px",
-                ...((error || !src) && {
-                  background: getRandomColorFromString(label),
-                }),
+                background:
+                  error || !src ? getRandomColorFromString(label) : "none",
               }}
             >
               {<Typography.Text>{label[0].toUpperCase()}</Typography.Text>}

examples/invoicer/src/components/header/search/index.tsx

@@ -4,9 +4,9 @@ import { AutoComplete, Avatar, Flex, Input, Typography } from "antd";
 import { useList, useNavigation } from "@refinedev/core";
 import { Link } from "react-router-dom";
 import { API_URL } from "@/utils/constants";
-import { Account, Client } from "@/types";
-import { useStyles } from "./styled";
 import { getRandomColorFromString } from "@/utils/get-random-color";
+import type { Account, Client } from "@/types";
+import { useStyles } from "./styled";
 
 type Option =
   | (Account & {

examples/invoicer/src/components/header/user/index.tsx

@@ -1,6 +1,6 @@
 import { useGetIdentity, useLogout } from "@refinedev/core";
 import { Avatar, Button, Dropdown, Flex, Skeleton, Typography } from "antd";
-import { User as UserType } from "@/types";
+import type { User as UserType } from "@/types";
 import { useStyles } from "./styled";
 
 export const User = () => {

examples/invoicer/src/components/logo/index.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, SVGProps } from "react";
+import type { CSSProperties, SVGProps } from "react";
 import { Flex, Typography } from "antd";
-import { TitleProps } from "antd/lib/typography/Title";
+import type { TitleProps } from "antd/lib/typography/Title";
 import { IconInvoicerLogo } from "@/components/icons";
 import { useStyles } from "./styled";
 

examples/invoicer/src/pages/accounts/create.tsx

@@ -1,11 +1,9 @@
-import { HttpError, useGo } from "@refinedev/core";
+import { type HttpError, useGo } from "@refinedev/core";
 import { useForm } from "@refinedev/antd";
 import { Flex, Form, Input, Modal, Select } from "antd";
 import InputMask from "react-input-mask";
-import { getValueProps } from "@refinedev/strapi-v4";
 import { FormItemUploadLogoDraggable } from "@/components/form";
-import { API_URL } from "@/utils/constants";
-import { Account, AccountForm } from "@/types";
+import type { Account, AccountForm } from "@/types";
 
 export const AccountsPageCreate = () => {
   const go = useGo();

examples/invoicer/src/pages/accounts/list.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import { getDefaultFilter, useGo } from "@refinedev/core";
 import {
   CreateButton,
@@ -14,8 +14,8 @@ import {
 import { EyeOutlined, SearchOutlined } from "@ant-design/icons";
 import { Avatar, Flex, Input, Select, Table, Typography } from "antd";
 import { API_URL } from "@/utils/constants";
-import { Account } from "@/types";
 import { getRandomColorFromString } from "@/utils/get-random-color";
+import type { Account } from "@/types";
 
 export const AccountsPageList = ({ children }: PropsWithChildren) => {
   const go = useGo();
@@ -131,7 +131,9 @@ export const AccountsPageList = ({ children }: PropsWithChildren) => {
                     src={src}
                     shape="square"
                     style={{
-                      backgroundColor: getRandomColorFromString(name),
+                      backgroundColor: src
+                        ? "none"
+                        : getRandomColorFromString(name),
                     }}
                   >
                     <Typography.Text>

examples/invoicer/src/pages/clients/edit.tsx

@@ -15,7 +15,6 @@ import {
   ExportOutlined,
   BankOutlined,
   MailOutlined,
-  GlobalOutlined,
   EnvironmentOutlined,
   PhoneOutlined,
   ContainerOutlined,
@@ -26,7 +25,7 @@ import {
   FormItemEditableText,
   FormItemEditableSelect,
 } from "@/components/form";
-import { Invoice } from "@/types";
+import type { Invoice } from "@/types";
 
 export const ClientsPageEdit = () => {
   const { list } = useNavigation();

examples/invoicer/src/pages/clients/list.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 import { getDefaultFilter, useGo } from "@refinedev/core";
 import {
   CreateButton,
@@ -15,7 +15,7 @@ import { Avatar, Flex, Input, Select, Table, Typography } from "antd";
 import { EyeOutlined, SearchOutlined } from "@ant-design/icons";
 import { API_URL } from "@/utils/constants";
 import { getRandomColorFromString } from "@/utils/get-random-color";
-import { Client } from "@/types";
+import type { Client } from "@/types";
 
 export const ClientsPageList = ({ children }: PropsWithChildren) => {
   const go = useGo();
@@ -204,7 +204,9 @@ export const ClientsPageList = ({ children }: PropsWithChildren) => {
                     src={src}
                     shape="square"
                     style={{
-                      backgroundColor: getRandomColorFromString(name),
+                      backgroundColor: src
+                        ? "none"
+                        : getRandomColorFromString(name),
                     }}
                   >
                     <Typography.Text>

examples/invoicer/src/pages/invoices/create.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from "antd";
 import { DeleteOutlined, PlusCircleOutlined } from "@ant-design/icons";
-import { Invoice, Service } from "@/types";
+import type { Invoice, Service } from "@/types";
 import { useStyles } from "./create.styled";
 
 export const InvoicesPageCreate = () => {

examples/invoicer/src/pages/invoices/list.tsx

@@ -115,7 +115,9 @@ export const InvoicePageList = () => {
                   src={src}
                   shape="square"
                   style={{
-                    backgroundColor: getRandomColorFromString(name),
+                    backgroundColor: src
+                      ? "none"
+                      : getRandomColorFromString(name || ""),
                   }}
                 >
                   <Typography.Text>{name?.[0]?.toUpperCase()}</Typography.Text>

examples/invoicer/src/pages/invoices/show.styled.tsx

@@ -45,11 +45,11 @@ export const useStyles = createStyles(({ token }) => {
     },
     fromToContainer: {
       minHeight: "192px",
-      flexWrap: "nowrap",
-      flexFlow: "row nowrap",
       padding: "32px",
 
       "@media print": {
+        flexWrap: "nowrap",
+        flexFlow: "row nowrap",
         minHeight: "unset",
         padding: "32px 0",
       },

examples/invoicer/src/pages/invoices/show.tsx

@@ -1,6 +1,7 @@
 import { useShow } from "@refinedev/core";
 import { FilePdfOutlined } from "@ant-design/icons";
 import {
+  Button,
   Avatar,
   Card,
   Col,
@@ -14,10 +15,9 @@ import {
 } from "antd";
 import { DateField, NumberField, Show } from "@refinedev/antd";
 import { API_URL } from "@/utils/constants";
-import { Invoice, Service } from "@/types";
-import { Button } from "antd";
-import { useStyles } from "./show.styled";
 import { getRandomColorFromString } from "@/utils/get-random-color";
+import type { Invoice, Service } from "@/types";
+import { useStyles } from "./show.styled";
 
 export const InvoicesPageShow = () => {
   const { styles } = useStyles();
@@ -30,6 +30,9 @@ export const InvoicesPageShow = () => {
 
   const invoice = queryResult?.data?.data;
   const loading = queryResult?.isLoading;
+  const logoUrl = invoice?.account?.logo?.url
+    ? `${API_URL}${invoice?.account?.logo?.url}`
+    : undefined;
 
   return (
     <Show
@@ -98,16 +101,14 @@ export const InvoicesPageShow = () => {
                     <Avatar
                       alt={invoice?.account?.company_name}
                       size={64}
-                      src={
-                        invoice?.account?.logo?.url
-                          ? `${API_URL}${invoice?.account?.logo?.url}`
-                          : undefined
-                      }
+                      src={logoUrl}
                       shape="square"
                       style={{
-                        backgroundColor: getRandomColorFromString(
-                          invoice?.account?.company_name || "",
-                        ),
+                        backgroundColor: logoUrl
+                          ? "transparent"
+                          : getRandomColorFromString(
+                              invoice?.account?.company_name || "",
+                            ),
                       }}
                     >
                       <Typography.Text>

examples/invoicer/src/providers/auth-provider/index.ts

@@ -1,4 +1,4 @@
-import { AuthProvider } from "@refinedev/core";
+import type { AuthProvider } from "@refinedev/core";
 import { AuthHelper } from "@refinedev/strapi-v4";
 import { API_URL, TOKEN_KEY } from "@/utils/constants";
 

examples/invoicer/src/providers/config-provider/index.tsx

@@ -1,11 +1,15 @@
 import {
-  PropsWithChildren,
+  type PropsWithChildren,
   createContext,
   useContext,
   useEffect,
   useState,
 } from "react";
-import { ConfigProvider as AntdConfigProvider, ThemeConfig, theme } from "antd";
+import {
+  ConfigProvider as AntdConfigProvider,
+  type ThemeConfig,
+  theme,
+} from "antd";
 import { ThemeProvider } from "antd-style";
 import { RefineThemes } from "@refinedev/antd";
 

examples/invoicer/src/styles/custom.css

@@ -72,6 +72,12 @@
 }
 
 @media print {
+  #root {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
   .print-hidden {
     display: none !important;
   }