Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For checking and comment #21

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+249 −29
Open

For checking and comment #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions src/modules/sales/_sections/sales/service-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import useServiceFormStore from "@/components/hooks/use-service-store";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { dateParser } from "@/lib/util/utils";
import { Separator } from "@radix-ui/react-separator";
import { File } from "lucide-react";
import { useNavigate } from "react-router-dom";

export function ServiceDetails() {
const navigate = useNavigate();
const {data} = useServiceFormStore();

if(!data) {
return (
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<CardHeader className="flex flex-row items-start bg-muted/50">
Not Found
</CardHeader>
</Card>
);
}
return (
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">
{`#${data.service_id}, ${data.customer}, ${data.service_status}, ${data.created_at}, ${data.has_sales_item}, ${data.has_job_order}, ${data.has_reservation}, ${data.has_borrow}`}
</CardTitle>
{data && (
<CardDescription>
Service Made: {dateParser(data.created_at ?? '')}
</CardDescription>
)}
</div>
<div className="ml-auto flex items-center gap-1">
<Button size="sm" variant="outline" className="h-8 gap-1" onClick={() => {navigate(`view/${data.service_id}`)}}>
<File className="h-3.5 w-3.5"/>
<span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
View More
</span>
</Button>
</div>
</CardHeader>
<CardContent className="p-6 text-sm">
<div className="grid gap-3">
<div className="fontt-semibold">Service Information</div>
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Description</span>
<span>{data.service_description}</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Status</span>
<span>{data.service_status}</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Sales</span>
<span>Sales data...</span>
</li>
</ul>
</div>
<Separator className="my-4"/>
<div>
<ul className="grid gap-3">
<li className="flex items-cener justify-between">
<span className="text-muted-foreground">
Processed Transactions
</span>
<span>69</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Sales</span>
<span>Job Order data...</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Sales</span>
<span>Reservation data...</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Sales</span>
<span>Borrow data...</span>
</li>
<li className="flex items-center justify-between">
<span className="text-muted-foreground">Sales</span>
<span>Action Status...</span>
<span>Delayed</span>
</li>
</ul>
</div>
</CardContent>
</Card>
);
}
48 changes: 24 additions & 24 deletions src/modules/sales/_sections/sales/service-list-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import {Heading} from '@/components/ui/heading';
import {Link, useSearchParams} from 'react-router-dom';
import {useSearchParams} from 'react-router-dom';
import ServiceList from '../../sales/service_list';
import {Button} from '@/components/ui/button';
import { ServiceDetails } from './service-details';
import { Separator } from '@/components/ui/separator';

export default function ServiceListSection() {
const [searchParams] = useSearchParams();

return (
<div className="flex flex-col sm:gap-4">
<div className="flex justify-between gap-4 p-4">
<Heading
title={`Services`}
description="Manange Service (Server side table functionalities.)"
/>
<div className="flex items-center gap-2">
<Link to="">
<Button variant={'outline'}>View Sales</Button>
</Link>
<Link to="">
<Button variant={'outline'}>View Joborder</Button>
</Link>
<Link to="">
<Button variant={'outline'}>View Borrow</Button>
</Link>
<Link to="">
<Button variant={'outline'}>View Reservation</Button>
</Link>
<div className="flex flex-col sm:gap-4">
<div className="grid flex-1 items-start gap-4 p-4 sm:px-6 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
{/* Employee List */}
<div className="grid items-start auto-rows-max gap-4 gap md:gap-6 lg:col-span-2">
<div className="flex flex-col gap-4">
<Heading
title={`Service Transactions`}
description="Manange Service (Server side table functionalities.)"
/>
<Separator />
</div>
<ServiceList searchParams={searchParams} />
</div>
<div className="flex flex-col gap-4">
<div className="flex lg:hidden">
<Separator />
</div>
{/* Service Profile */}
<ServiceDetails />
</div>
</div>
</div>
<ServiceList searchParams={searchParams} />
</div>
);
);
}
120 changes: 119 additions & 1 deletion src/modules/sales/sales/create/create-service-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,119 @@
// Still not sure if I have to add a dedicated Service
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import {Separator} from '@/components/ui/separator';
import {Heading} from '@/components/ui/heading'; // Assuming you have a custom Heading component
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
import {Button} from '@/components/ui/button';
import {useSalesHook} from '@/components/hooks/use-sales-hook';
import {useEffect, useState} from 'react';
import {Card} from '@/components/ui/card';
import {Progress} from '@/components/ui/progress';
import {useProgressStore} from '@/components/hooks/use-progress-store';
import {ScrollArea} from '@/components/ui/scroll-area';
import {Customer} from '@/lib/cms-zod-schema';
import {useEmployeeRoleDetailsStore} from '@/modules/authentication/hooks/use-sign-in-userdata';
import axios from 'axios';
import {request} from '@/api/axios';
import {toast} from 'sonner';
export function SalesCreateService() {
const {salesHookData, setSaleHookData} = useSalesHook();
const [saving, setSaving] = useState<boolean>(false);
const {progressList, resetProgress, setProgress} = useProgressStore();
const [messages, setMessages] = useState<string[]>([]);
const {user} = useEmployeeRoleDetailsStore();
const processCreate = async (data: Customer | undefined) => {
try {
const existingJoborders = salesHookData['sales_product'] || [];
const existingJoborder = existingJoborders
.filter((existingData) => existingData.record?.type === 'Joborder')
.map((filteredData) => filteredData);

const existingItems = existingJoborders
.filter((existingData) => existingData.record?.type === 'Sales')
.map((filteredData) => filteredData.record);
const newData = {
employee_id: user?.employee.employee_id,
customer: data,
joborder: existingJoborder[0].record,
sales_products: existingItems,
service: salesHookData['service'][0].service,
};
console.log(newData);
await request('POST', '/api/v1/sms/service', newData);
toast.success('Transaction created');
} catch (error) {
console.log(error);
let errorMessage = 'An unexpected error occurred';
if (axios.isAxiosError(error)) {
errorMessage =
error.response?.data?.message || // Use the `message` field if available
error.response?.data?.errors?.[0]?.message || // If `errors` array exists, use the first error's message
'Failed to process request';
}

toast.error(errorMessage);
}
};
useEffect(() => {
if (progressList.length > 0) {
const lastProgress = progressList[progressList.length - 1];
setMessages((prevMessages) => [...prevMessages, lastProgress.message]);
}
}, [progressList]);
return (
<div className="flex flex-col gap-4">
<div className="grid flex-1 items-start gap-4 p-4 sm:px-6 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
{/* Form */}
<div className="grid items-start auto-rows-max gap-4 gap md:gap-6 lg:col-span-2">
<div className="flex flex-col gap-4">
<Heading
title={`Create Service`}
description="Fill up the form and complete all the steps, After this we'll be moved to dedicated page for this service"
/>
</div>
{saving ? (
<Card className="w-full h-[300px] p-5 flex flex-col gap-5">
{progressList.map((progress, index) => (
<div key={index}>
<p>{progress.message}</p>
<Progress value={progress.value} />
</div>
))}
<ScrollArea className="relative h-[calc(50vh-220px)] rounded-md border p-3">
{messages.map((msg, index) => (
<p key={index}>{msg}</p>
))}
</ScrollArea>
</Card>
) : (
<>
<Separator />

<Tabs defaultValue="item-1">
<div className="flex items-center justify-between">
<Button onClick={() => processCreate(undefined)}>
{' '}
Skip{' '}
</Button>
</div>
<TabsContent value="item-1" className="p-5">
<CreateCustomerForm processCreate={processCreate} />
</TabsContent>
<TabsContent value="item-2" className="p-5">
<SearchCustomer processCreate={processCreate} />
</TabsContent>
</Tabs>
</>
)}
</div>
<div className="flex flex-col gap-4">
<div className="flex lg:hidden">
<Separator />
</div>
{/* Cart */}
<SelectedSaleReviewItems />
</div>
</div>
</div>
);
}
17 changes: 13 additions & 4 deletions src/modules/sales/sales/service_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
getPaginationRowModel,
useReactTable,
} from '@tanstack/react-table'; // Adjust the import path based on your project setup
import {useLocation, useNavigate, useSearchParams} from 'react-router-dom';
import {Link, useLocation, useNavigate, useSearchParams} from 'react-router-dom';
import {ScrollArea, ScrollBar} from '@/components/ui/scroll-area';
import {
Table,
Expand All @@ -24,8 +24,8 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {Button} from '@/components/ui/button';
import {ChevronLeftIcon, ChevronRightIcon} from 'lucide-react';
import {Button, buttonVariants} from '@/components/ui/button';
import {ChevronLeftIcon, ChevronRightIcon, Plus} from 'lucide-react';
import {DoubleArrowLeftIcon, DoubleArrowRightIcon} from '@radix-ui/react-icons';
import {ServiceWithDetails} from '@/lib/sales-zod-schema';
import {
Expand All @@ -34,6 +34,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {Input} from '@/components/ui/input';
import { cn } from '@/lib/util/utils';

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
Expand Down Expand Up @@ -164,7 +165,7 @@ export function ServiceTable<TData extends ServiceWithDetails, TValue>({
<div className="space-x-2 flex">
{!isDetails && (
<Input
placeholder={`Find Customer...`}
placeholder={`Find Service...`}
// value={searchValue ?? ''} // Bind the input value to the current filter value
// onChange={(event) =>
// table.getColumn(searchKey)?.setFilterValue(event.target.value)
Expand Down Expand Up @@ -239,6 +240,14 @@ export function ServiceTable<TData extends ServiceWithDetails, TValue>({
</>
)}
</div>
<div className="flex justify-between gap-3 md:gap-0">
<Link
to={'create'}
className={cn(buttonVariants({variant: 'default'}))}
>
<Plus className="mr-2 h-4 w-4" /> Add Services
</Link>
</div>
</div>
<ScrollArea className="h-[calc(81vh-220px)] rounded-md border">
<Table className="relative">
Expand Down