New members

package.json

@@ -1,14 +1,17 @@
 {
+  "homepage": "https://github.com/Azamat951/crm",
   "name": "crm",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
+  "dev": "vite",
+  "build": "vite build",
+  "lint": "eslint .",
+  "preview": "vite preview",
+  "predeploy": "npm run build",
+  "deploy": "gh-pages -d dist"
+},
   "dependencies": {
     "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-query": "^5.90.21",
@@ -28,6 +31,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "gh-pages": "^6.3.0",
     "globals": "^16.4.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",

src/components/AddButton.tsx

@@ -0,0 +1,14 @@
+import { AddIcon } from "./Icons"
+type AddProps = {
+    style?: string
+    onClick: () => void
+}
+
+
+export const AddButton = ({style,onClick}: AddProps) => {
+    return <>
+        <button className={`flex gap-[10px] text-white py-[10px] px-[30px] bg-[#343743] rounded-[20px] mt-[10px] ${style}`}
+         onClick={onClick} ><AddIcon/>  ADD NEW</button>
+
+    </>
+}

src/components/Button.tsx

@@ -1,4 +1,14 @@
-const Button = () => {
-    return <button>Button</button>;
-};
-export default Button;
+    const styles: {[key: string]:string} = {
+    menu: "bg-[#9B74F0] hover:bg-[#9B74F080] transition duration-600 px-4 py-1 rounded-xl text-white",
+    control: "bg-transparent"
+    }
+
+    type ButtonProps = {
+        text: string;
+        onClick?: () => void;
+        style: string
+    }
+
+    export const Button = ({text,onClick,style}: ButtonProps) => {
+        return <button onClick={onClick} className={styles[style]}>{text}</button>
+    }

src/components/Card.tsx

@@ -1,4 +1,25 @@
-const Card = () => {
-    return <>Card</>;
-};
-export default Card;
+import { Button } from "./Button";
+
+const styles: {[key: string]:string} = {
+    container: "w-[245px] h-[295px] bg-[#343743] rounded-md",
+    IMGcontainer: "bg-[#272A30] rounded-md w-[225px] h-[131px]"
+}
+
+type CardProps = {
+    img: string;
+    title: string;
+    brand: string;
+    quality:string;
+    style: string;
+    imgStyle: string
+}
+export const Card = ({img,title,brand,quality,style,imgStyle}: CardProps) => {
+   return <div className={styles[style]}>
+    <div className={imgStyle}><img src={img} alt="" /></div>
+
+    <p className="font-[700] text-white">{title}</p>
+    <p className="text-[14px text-white">Brand: {brand}</p>
+    <p className="text-[14px text-white">Quality: {quality}</p>
+    <Button text="Add to cart" style="POS" />
+   </div>
+}

src/components/DeleteButton.tsx

@@ -0,0 +1,14 @@
+import { DelIcon } from "./Icons"
+
+type DbtnProps = {
+    onClick:() => void,
+    style?: string
+}
+
+export const DeleteButton = ({onClick,style}:DbtnProps) => {
+
+    return(
+    <button onClick={onClick} className={style}>
+    <DelIcon/>
+    </button>)
+}

src/components/EditButton.tsx

@@ -0,0 +1,13 @@
+import { EditIcon } from "./Icons"
+
+type EbtnProps = {
+    onClick:() => void,
+    style?: string
+}
+
+export const EditButton = ({onClick,style}:EbtnProps) => {
+    return(
+    <button onClick={onClick} className={style}>
+    <EditIcon/>
+    </button>)
+}

src/components/FilterButton.tsx

@@ -0,0 +1,14 @@
+import { FilterICon } from "./Icons"
+
+type FilterProps = {
+    onClick?: () => void,
+    style?: string
+}
+
+
+export const FilterButton = ({onClick,style}: FilterProps) => {
+    return <>
+        <button className={`flex gap-[10px] text-white py-[10px] px-[30px] bg-[#343743] rounded-[20px] mt-[10px] ${style}`} onClick={onClick}><FilterICon/>  Filter</button>
+
+    </>
+}

src/components/Icons.tsx

@@ -0,0 +1,211 @@
+import { ssrExportAllKey } from "vite/module-runner";
+
+export const HomeIcon = () => (
+  <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 17V11H12V17H17V9H20L10 0L0 9H3V17H8Z" fill="currentColor"/>
+</svg>
+
+);
+
+export const MembersIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_78)">
+<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 20C9.97 20 7.57 19.18 5.86 17.12C7.55 15.8 9.68 15 12 15C14.32 15 16.45 15.8 18.14 17.12C16.43 19.18 14.03 20 12 20Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_78">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+
+)
+
+
+export const POSIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16C4.9 16 4.01 16.9 4.01 18C4.01 19.1 4.9 20 6 20C7.1 20 8 19.1 8 18C8 16.9 7.1 16 6 16ZM0 0V2H2L5.6 9.59L4.25 12.04C4.09 12.32 4 12.65 4 13C4 14.1 4.9 15 6 15H18V13H6.42C6.28 13 6.17 12.89 6.17 12.75L6.2 12.63L7.1 11H14.55C15.3 11 15.96 10.59 16.3 9.97L19.88 3.48C19.96 3.34 20 3.17 20 3C20 2.45 19.55 2 19 2H4.21L3.27 0H0ZM16 16C14.9 16 14.01 16.9 14.01 18C14.01 19.1 14.9 20 16 20C17.1 20 18 19.1 18 18C18 16.9 17.1 16 16 16Z" fill="currentColor"/>
+</svg>
+
+)
+
+
+export const InvIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_82)">
+<path d="M20 2H4C3 2 2 2.9 2 4V7.01C2 7.73 2.43 8.35 3 8.7V20C3 21.1 4.1 22 5 22H19C19.9 22 21 21.1 21 20V8.7C21.57 8.35 22 7.73 22 7.01V4C22 2.9 21 2 20 2ZM15 14H9V12H15V14ZM20 7H4V4L20 3.98V7Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_82">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+
+
+)
+
+export const ProductsIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_76)">
+<path d="M12 2L6.5 11H17.5L12 2Z" fill="currentColor"/>
+<path d="M17.5 22C19.9853 22 22 19.9853 22 17.5C22 15.0147 19.9853 13 17.5 13C15.0147 13 13 15.0147 13 17.5C13 19.9853 15.0147 22 17.5 22Z" fill="currentColor"/>
+<path d="M3 13.5H11V21.5H3V13.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_76">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const HisotryIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_79)">
+<path d="M13 3C8.03 3 4 7.03 4 12H1L4.89 15.89L4.96 16.03L9 12H6C6 8.13 9.13 5 13 5C16.87 5 20 8.13 20 12C20 15.87 16.87 19 13 19C11.07 19 9.32 18.21 8.06 16.94L6.64 18.36C8.27 19.99 10.51 21 13 21C17.97 21 22 16.97 22 12C22 7.03 17.97 3 13 3ZM12 8V13L16.28 15.54L17 14.33L13.5 12.25V8H12Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_79">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const PaymentIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_75)">
+<path d="M19 14V6C19 4.9 18.1 4 17 4H3C1.9 4 1 4.9 1 6V14C1 15.1 1.9 16 3 16H17C18.1 16 19 15.1 19 14ZM10 13C8.34 13 7 11.66 7 10C7 8.34 8.34 7 10 7C11.66 7 13 8.34 13 10C13 11.66 11.66 13 10 13ZM23 7V18C23 19.1 22.1 20 21 20H4V18H21V7H23Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_1_75">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+
+export const LogOutIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_202)">
+<path d="M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12L17 7ZM4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_1_202">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const SearchIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1411)">
+<path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1411">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const FilterICon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1416)">
+<path d="M4.25018 5.61C6.27018 8.2 10.0002 13 10.0002 13V19C10.0002 19.55 10.4502 20 11.0002 20H13.0002C13.5502 20 14.0002 19.55 14.0002 19V13C14.0002 13 17.7202 8.2 19.7402 5.61C20.2502 4.95 19.7802 4 18.9502 4H5.04018C4.21018 4 3.74018 4.95 4.25018 5.61Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1416">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const AddIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1422)">
+<path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1422">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const EditIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1286)">
+<path d="M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1286">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const DelIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1279)">
+<path d="M5.99951 19C5.99951 20.1 6.89951 21 7.99951 21H15.9995C17.0995 21 17.9995 20.1 17.9995 19V7H5.99951V19ZM18.9995 4H15.4995L14.4995 3H9.49951L8.49951 4H4.99951V6H18.9995V4Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1279">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+export const PhoneIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_51_1696)">
+<path d="M20.01 15.38C18.78 15.38 17.59 15.18 16.48 14.82C16.13 14.7 15.74 14.79 15.47 15.06L13.9 17.03C11.07 15.68 8.42 13.13 7.01 10.2L8.96 8.54C9.23 8.26 9.31 7.87 9.2 7.52C8.83 6.41 8.64 5.22 8.64 3.99C8.64 3.45 8.19 3 7.65 3H4.19C3.65 3 3 3.24 3 3.99C3 13.28 10.73 21 20.01 21C20.72 21 21 20.37 21 19.82V16.37C21 15.83 20.55 15.38 20.01 15.38Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_51_1696">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const MemberIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11_204)">
+<path d="M12 12C14.21 12 16 10.21 16 7.99998C16 5.78998 14.21 3.99998 12 3.99998C9.79 3.99998 8 5.78998 8 7.99998C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="#9B74F0"/>
+</g>
+<defs>
+<clipPath id="clip0_11_204">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+)
+
+export const ExpandIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>
+
+)

src/components/LogOutButton.tsx

@@ -0,0 +1,13 @@
+import { LogOutIcon } from "./Icons"
+
+type LbtnProps = {
+    onClick:() => void,//placeholder for actual logout func
+    style?: string
+}
+
+export const LogOutButton = ({onClick,style}:LbtnProps) => {
+    return(
+    <button onClick={onClick} className={style}>
+    <LogOutIcon/>
+    </button>)
+}