gitea_admin/krishna_sales
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button theme changed

Browse Source
This commit is contained in:
suryacp23 2026-07-21 16:03:37 +05:30
parent 6bb5b6e18a
commit 7a832325f3
13 changed files with 104 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/forms/DynamicForm.tsx
View File

@ -103,6 +103,9 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId:
setValues(defaultValues);
setLoading(false);
if (res.activity_name) {
onActivityChange?.(res.activity_name);
}
}
})
.catch((err: any) => {
@ -161,7 +164,10 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId:
};
if (loading) {
return <div className="p-8 flex justify-center"><Spinner label="Loading form..." /></div>;
const formattedActivity = currentActivityId
? currentActivityId.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
: 'form';
return <div className="p-8 flex justify-center"><Spinner label={`Loading ${formattedActivity}...`} /></div>;
}
if (error || !schema) {
return <div className="p-4 text-ruby-600">Failed to load form: {error}</div>;

2
src/components/forms/fields/WfLookupField.tsx
View File

@ -73,7 +73,7 @@ export function WfLookupField({ label, required, value, onChange, client, config
return (
<SelectField
label={loading ? `${label} (Loading...)` : label}
label={label}
required={required}
value={String(value || '')}
onChange={onChange}

2
src/components/reusable/Input.tsx
View File

@ -28,7 +28,7 @@ export function Input({
return (
<label className={cn('flex flex-col gap-1.5 font-sans', disabled && 'cursor-not-allowed', className)}>
{label && (
<span className="text-sm font-medium text-muted">
<span className="text-sm font-bold text-slate-700">
{label}
{required && <span className="text-ruby-600"> *</span>}
</span>

2
src/components/reusable/Select.tsx
View File

@ -21,7 +21,7 @@ export function Select({ label, hint, options = [], required, className, ...rest
return (
<label className={cn('flex flex-col gap-1.5 font-sans', className)}>
{label && (
<span className="text-sm font-medium text-muted">
<span className="text-sm font-bold text-slate-700">
{label}
{required && <span className="text-ruby-600"> *</span>}
</span>

2
src/components/reusable/Textarea.tsx
View File

@ -20,7 +20,7 @@ export function Textarea({
return (
<label className={cn('flex flex-col gap-1.5 font-sans', disabled && 'cursor-not-allowed', className)}>
{label && (
<span className="text-sm font-medium text-muted">
<span className="text-sm font-bold text-slate-700">
{label}
{required && <span className="text-ruby-600"> *</span>}
</span>

36
src/components/rv/RecordView.tsx
View File

@ -105,10 +105,10 @@ export function RecordView({
setLoading(true);
setError(null);
try {
const r = await client.recordView(rvUid, {
page,
limit: internalPageSize,
search: debounced,
const r = await client.recordView(rvUid, {
page,
limit: internalPageSize,
search: debounced,
filters: filtersParam,
sortBy,
sortDir,
@ -197,7 +197,7 @@ export function RecordView({
const options = resp.config.filter_options?.[key];
if (!options || options.length === 0) return null;
const opts = options.map(o => ({ value: o, label: o }));
return (
<Select
@ -237,17 +237,17 @@ export function RecordView({
<div className="overflow-x-auto scrollbar-slim">
<table className="w-full border-collapse min-w-[640px]">
<thead>
<tr className="bg-[var(--z-rv-table-header)] border-b border-[var(--z-rv-table-border)]">
<tr className="border-b border-[var(--z-rv-table-border)]">
{fields.map((f) => (
<th
key={f.field_key}
className="text-left px-[18px] py-[11px] text-[10px] font-bold uppercase tracking-[0.06em] text-faint whitespace-nowrap"
className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-slate-50/50"
>
{f.output_label}
</th>
))}
{rowActions && (
<th className="sticky right-0 bg-inherit px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.06em] text-faint border-b border-border-subtle z-10 w-24">
<th className="sticky right-0 bg-slate-50/50 px-4 py-4 text-left text-sm font-extrabold uppercase tracking-wider text-[#1b37a5] border-b border-border-subtle z-10 w-24">
Actions
</th>
)}
@ -268,7 +268,7 @@ export function RecordView({
const isSku = lowerKey === 'sku_code';
const isStatus = lowerKey.includes('status') || lowerKey.includes('state');
const valStr = formatValue(row[f.field_key], f.field_key);
let content = <>{valStr}</>;
if (valStr !== '—' && valStr !== '') {
@ -283,7 +283,7 @@ export function RecordView({
"bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200",
"bg-teal-50 text-teal-700 border-teal-200",
];
let hash = 0;
for (let i = 0; i < valStr.length; i++) {
hash = valStr.charCodeAt(i) + ((hash << 5) - hash);
@ -302,7 +302,7 @@ export function RecordView({
const isSuccess = valLower.includes('approve') || valLower.includes('complete') || valLower.includes('success') || valLower.includes('active');
const isWarning = valLower.includes('pending') || valLower.includes('draft') || valLower.includes('hold');
const isDanger = valLower.includes('reject') || valLower.includes('fail') || valLower.includes('cancel');
if (isSuccess) colorClass = "bg-emerald-50 text-emerald-700 border-emerald-200";
else if (isWarning) colorClass = "bg-amber-50 text-amber-700 border-amber-200";
else if (isDanger) colorClass = "bg-red-50 text-red-700 border-red-200";
@ -317,13 +317,13 @@ export function RecordView({
}
return (
<td key={f.field_key} className="px-[18px] py-3 text-sm text-body whitespace-nowrap">
<td key={f.field_key} className="px-[18px] py-4 text-sm text-body whitespace-nowrap">
{content}
</td>
);
})}
{rowActions && (
<td className="sticky right-0 bg-inherit px-4 py-3 whitespace-nowrap border-b border-border-subtle z-10">
<td className="sticky right-0 bg-inherit px-4 py-4 whitespace-nowrap border-b border-border-subtle z-10">
<div onClick={(e) => e.stopPropagation()}>
{rowActions(row)}
</div>
@ -335,11 +335,11 @@ export function RecordView({
</table>
</div>
)}
<Pagination
page={page}
pageSize={internalPageSize}
total={total}
onPage={setPage}
<Pagination
page={page}
pageSize={internalPageSize}
total={total}
onPage={setPage}
onPageSizeChange={(sz) => {
setInternalPageSize(sz);
setPage(1);

6
src/lib/format.ts
View File

@ -75,8 +75,12 @@ export function formatValue(value: unknown, fieldKey?: string): string {
}
}
/** Number with Indian-locale grouping; falls back to the raw string. */
export function formatNumber(value: unknown): string {
const n = typeof value === 'number' ? value : Number(value);
return Number.isFinite(n) ? n.toLocaleString('en-IN') : formatValue(value);
}
export function formatActivityName(activityId: string): string {
if (!activityId) return '';
return activityId.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
}

10
src/screens/CallsPage.tsx
View File

@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { formatActivityName } from '../lib/format';
import { ORDER_BOOKING } from '../api/config';
import { orderBookingClient } from '../api/clients';
@ -14,6 +15,7 @@ export function CallsPage() {
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
const navigate = useNavigate();
const [isCreating, setIsCreating] = useState(false);
const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
const [refreshKey, setRefreshKey] = useState(0);
const [activeActivity, setActiveActivity] = useState<{ id: string; name: string } | null>(null);
@ -89,7 +91,10 @@ export function CallsPage() {
if (id != null) navigate(`/calls/${id}`);
}}
headerActions={
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
setIsCreating(true);
}}>
Log Visit
</Button>
}
@ -98,7 +103,7 @@ export function CallsPage() {
<Modal
open={isCreating}
onClose={() => setIsCreating(false)}
title="Log Visit"
title={createTitle}
width="md"
>
<DynamicForm
@ -109,6 +114,7 @@ export function CallsPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setIsCreating(false)}
onActivityChange={setCreateTitle}
/>
</Modal>

19
src/screens/DailyLogsPage.tsx
View File

@ -6,6 +6,7 @@ import { useState } from 'react';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { formatActivityName } from '../lib/format';
import { DAILY_REPORTS } from '../api/config';
import { dailyReportsClient } from '../api/clients';
@ -14,7 +15,9 @@ export function DailyLogsPage() {
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
const navigate = useNavigate();
const [isCreating, setIsCreating] = useState(false);
const [createTitle, setCreateTitle] = useState(formatActivityName(DAILY_REPORTS.activities.INIT.uid));
const [punchOutInstanceId, setPunchOutInstanceId] = useState<number | string | null>(null);
const [punchOutTitle, setPunchOutTitle] = useState(formatActivityName(DAILY_REPORTS.activities.PUNCH_OUT.uid));
const [refreshKey, setRefreshKey] = useState(0);
return (
@ -27,7 +30,10 @@ export function DailyLogsPage() {
if (id != null) navigate(`/daily/${id}`);
}}
headerActions={
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
setCreateTitle(formatActivityName(DAILY_REPORTS.activities.INIT.uid));
setIsCreating(true);
}}>
Punch In
</Button>
}
@ -37,7 +43,10 @@ export function DailyLogsPage() {
if (state.includes('out') || !state.includes('in')) return null;
return (
<Button size="sm" variant="secondary" onClick={() => setPunchOutInstanceId(row.instance_id as string | number)}>
<Button size="sm" variant="secondary" onClick={() => {
setPunchOutTitle(formatActivityName(DAILY_REPORTS.activities.PUNCH_OUT.uid));
setPunchOutInstanceId(row.instance_id as string | number);
}}>
Punch Out
</Button>
);
@ -47,7 +56,7 @@ export function DailyLogsPage() {
<Modal
open={isCreating}
onClose={() => setIsCreating(false)}
title="Punch In"
title={createTitle}
width="md"
>
<DynamicForm
@ -58,13 +67,14 @@ export function DailyLogsPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setIsCreating(false)}
onActivityChange={setCreateTitle}
/>
</Modal>
<Modal
open={punchOutInstanceId != null}
onClose={() => setPunchOutInstanceId(null)}
title="Punch Out"
title={punchOutTitle}
width="md"
>
{punchOutInstanceId != null && (
@ -77,6 +87,7 @@ export function DailyLogsPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setPunchOutInstanceId(null)}
onActivityChange={setPunchOutTitle}
/>
)}
</Modal>

10
src/screens/MyOrdersPage.tsx
View File

@ -6,6 +6,7 @@ import { useState } from 'react';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { formatActivityName } from '../lib/format';
import { ORDER_BOOKING } from '../api/config';
import { orderBookingClient } from '../api/clients';
import { useAuth } from '../auth/context';
@ -15,6 +16,7 @@ export function MyOrdersPage() {
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
const navigate = useNavigate();
const [isCreating, setIsCreating] = useState(false);
const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
const [refreshKey, setRefreshKey] = useState(0);
const { userEmail } = useAuth();
@ -30,7 +32,10 @@ export function MyOrdersPage() {
if (id != null) navigate(`/my-orders/${id}`);
}}
headerActions={
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
setIsCreating(true);
}}>
Place Order
</Button>
}
@ -39,7 +44,7 @@ export function MyOrdersPage() {
<Modal
open={isCreating}
onClose={() => setIsCreating(false)}
title="Place Order"
title={createTitle}
width="md"
>
<DynamicForm
@ -50,6 +55,7 @@ export function MyOrdersPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setIsCreating(false)}
onActivityChange={setCreateTitle}
/>
</Modal>

10
src/screens/OrdersPage.tsx
View File

@ -6,6 +6,7 @@ import { useState } from 'react';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { formatActivityName } from '../lib/format';
import { ORDER_BOOKING } from '../api/config';
import { orderBookingClient } from '../api/clients';
@ -14,6 +15,7 @@ export function OrdersPage() {
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
const navigate = useNavigate();
const [isCreating, setIsCreating] = useState(false);
const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
const [refreshKey, setRefreshKey] = useState(0);
return (
<>
@ -24,7 +26,10 @@ export function OrdersPage() {
if (id != null) navigate(`/orders/${id}`);
}}
headerActions={
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
setIsCreating(true);
}}>
Place Order
</Button>
}
@ -33,7 +38,7 @@ export function OrdersPage() {
<Modal
open={isCreating}
onClose={() => setIsCreating(false)}
title="Place Order"
title={createTitle}
width="md"
>
<DynamicForm
@ -44,6 +49,7 @@ export function OrdersPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setIsCreating(false)}
onActivityChange={setCreateTitle}
/>
</Modal>

19
src/screens/StoresPage.tsx
View File

@ -6,6 +6,7 @@ import { StoreDetail } from '../components/dv';
import { Button } from '../components/buttons/Button';
import { Plus } from 'lucide-react';
import { DynamicForm } from '../components/forms/DynamicForm';
import { formatActivityName } from '../lib/format';
import { STORE } from '../api/config';
import { storeClient } from '../api/clients';
@ -14,7 +15,9 @@ export function StoresPage() {
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
const navigate = useNavigate();
const [isCreating, setIsCreating] = useState(false);
const [createTitle, setCreateTitle] = useState(formatActivityName(STORE.activities.INIT.uid));
const [editingInstanceId, setEditingInstanceId] = useState<number | string | null>(null);
const [editTitle, setEditTitle] = useState(formatActivityName(STORE.activities.EDIT_STORE.uid));
const [refreshKey, setRefreshKey] = useState(0);
return (
@ -26,12 +29,18 @@ export function StoresPage() {
if (id != null) navigate(`/stores/${id}`);
}}
headerActions={
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => setIsCreating(true)}>
<Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
setCreateTitle(formatActivityName(STORE.activities.INIT.uid));
setIsCreating(true);
}}>
Create Store
</Button>
}
rowActions={(row) => (
<Button size="sm" variant="secondary" onClick={() => setEditingInstanceId(row.instance_id as string | number)}>
<Button size="sm" variant="secondary" onClick={() => {
setEditTitle(formatActivityName(STORE.activities.EDIT_STORE.uid));
setEditingInstanceId(row.instance_id as string | number);
}}>
Edit
</Button>
)}
@ -40,7 +49,7 @@ export function StoresPage() {
<Modal
open={isCreating}
onClose={() => setIsCreating(false)}
title="Create Store"
title={createTitle}
width="md"
>
<DynamicForm
@ -51,13 +60,14 @@ export function StoresPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setIsCreating(false)}
onActivityChange={setCreateTitle}
/>
</Modal>
<Modal
open={editingInstanceId != null}
onClose={() => setEditingInstanceId(null)}
title="Edit Store"
title={editTitle}
width="md"
>
{editingInstanceId != null && (
@ -70,6 +80,7 @@ export function StoresPage() {
setRefreshKey(k => k + 1);
}}
onCancel={() => setEditingInstanceId(null)}
onActivityChange={setEditTitle}
/>
)}
</Modal>

19
src/styles/styles.css
View File

@ -120,10 +120,12 @@
html {
height: 100%;
}
body,
#root {
min-height: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
@ -134,47 +136,58 @@
}
@layer components {
/* Brand gradients — not expressible as plain utilities. */
.bg-sunrise {
background-image: var(--gradient-sunrise);
}
.bg-sunrise-soft {
background-image: var(--gradient-sunrise-soft);
}
.bg-navy-grad {
background-image: var(--gradient-navy);
}
/* Tabular figures for aligning currency & counts. */
.nums {
font-variant-numeric: tabular-nums;
}
/* Primary focus ring on inputs/selects. */
.focus-ring:focus-within {
border-color: var(--z-btn-primary-bg);
box-shadow: var(--shadow-focus);
}
/* Slim, theme-tinted scrollbar for in-panel scroll areas. */
.scrollbar-slim {
scrollbar-width: thin;
scrollbar-color: var(--border-default) transparent;
}
.scrollbar-slim::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scrollbar-slim::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-slim::-webkit-scrollbar-thumb {
background-color: var(--border-default);
background-clip: padding-box;
border: 3px solid transparent;
border-radius: 9999px;
}
.scrollbar-slim:hover::-webkit-scrollbar-thumb {
background-color: var(--text-faint);
}
}
/* root variable */
:root {
@ -223,9 +236,9 @@
--tiles-count-size: 20px;
/* button */
--z-btn-primary-bg: #0058be;
--z-btn-primary-bg: linear-gradient(91deg, #1b37a5 0.17%, #2e56e1 99.89%);
--z-btn-primary-color: #fff;
--primary-btn-active: #196ed0;
--primary-btn-active: linear-gradient(91deg, #3553c5 0.17%, #4a70f3 99.89%);
--primary-btn-activeClr: #fff;
--z-btn-secondary-bg: #f4f4f4;
--z-btn-secondary-color: #10182b;
@ -492,4 +505,4 @@
--z-border-success-200: #6ce9a6;
--z-border-success-300: #32d584;
--z-border-success-400: #12b76a;
}
}